[desk-tool] Make loading state dependent on connection state

sanity-io · Feb 19, 2020 · 832b66b · 832b66b
1 parent 6415ee7
commit 832b66b
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 16 deletions.
diff --git a/packages/@sanity/desk-tool/src/components/DocumentStatusBar/DocumentStatusBarActions.tsx b/packages/@sanity/desk-tool/src/components/DocumentStatusBar/DocumentStatusBarActions.tsx
@@ -90,7 +90,7 @@ function DocumentStatusBarActionsInner(props: Props) {
 
 export function DocumentStatusBarActions(props: {id: string; type: string}) {
   const editState = useEditState(props.id, props.type)
-  const {isConnected} = useConnectionState(props.id, props.type)
+  const connectionState = useConnectionState(props.id, props.type)
 
   const [isMenuOpen, setMenuOpen] = React.useState(false)
 
@@ -105,7 +105,7 @@ export function DocumentStatusBarActions(props: {id: string; type: string}) {
       onActionComplete={() => setMenuOpen(false)}
       actions={actions}
       actionProps={editState}
-      disabled={!isConnected}
+      disabled={connectionState !== 'connected'}
     />
   ) : null
 }
@@ -120,7 +120,7 @@ const historyActions = [HistoryRestoreAction]
 
 export function HistoryStatusBarActions(props: HistoryStatusBarActionsProps) {
   const editState: any = useEditState(props.id, props.type)
-  const {isConnected} = useConnectionState(props.id, props.type)
+  const connectionState = useConnectionState(props.id, props.type)
 
   if (!editState) {
     return null
@@ -137,7 +137,7 @@ export function HistoryStatusBarActions(props: HistoryStatusBarActionsProps) {
       onActionComplete={() => {
         /*todo: make optional*/
       }}
-      disabled={!isConnected || Boolean(disabled)}
+      disabled={connectionState !== 'connected' || Boolean(disabled)}
     />
   )
 }
diff --git a/packages/@sanity/desk-tool/src/components/DocumentStatusBar/SyncState.tsx b/packages/@sanity/desk-tool/src/components/DocumentStatusBar/SyncState.tsx
@@ -11,7 +11,9 @@ interface Props {
 
 export function SyncState(props: Props) {
   const {isSyncing} = useSyncState(props.id, props.type)
-  const {isConnected} = useConnectionState(props.id, props.type)
+  const connectionState = useConnectionState(props.id, props.type)
+
+  const isConnected = connectionState === 'connected'
 
   const icon = isSyncing || !isConnected ? <SyncIcon /> : <CheckIcon />
   const className = isSyncing

diff --git a/packages/@sanity/desk-tool/src/pane/DocumentPane.tsx b/packages/@sanity/desk-tool/src/pane/DocumentPane.tsx
@@ -120,8 +120,7 @@ interface Props {
   published: null | Doc
   draft: null | Doc
   value: null | Doc
-  isLoading: boolean
-  isConnected: boolean
+  connectionState: 'connecting' | 'connected' | 'reconnecting'
   isSelected: boolean
   isCollapsed: boolean
   markers: any[]
@@ -702,7 +701,7 @@ export default class DocumentPane extends React.PureComponent<Props, State> {
 
   renderCurrentView() {
     const initialValue = this.getInitialValue()
-    const {views, options, urlParams, value, onChange, isConnected, markers} = this.props
+    const {views, options, urlParams, value, onChange, connectionState, markers} = this.props
     const {historical, historyState} = this.state
 
     const selectedHistoryEvent = this.findSelectedHistoryEvent()
@@ -739,7 +738,7 @@ export default class DocumentPane extends React.PureComponent<Props, State> {
     const formProps = {
       ...viewProps,
       value: value,
-      isConnected,
+      connectionState,
       markers,
       history: {
         isOpen: this.historyIsOpen(),
@@ -769,12 +768,11 @@ export default class DocumentPane extends React.PureComponent<Props, State> {
   render() {
     const {
       isSelected,
-      isLoading,
       value,
       isCollapsed,
       isClosable,
       onCollapse,
-      isConnected,
+      connectionState,
       onExpand,
       menuItemGroups,
       views,
@@ -790,7 +788,7 @@ export default class DocumentPane extends React.PureComponent<Props, State> {
       return this.renderUnknownSchemaType()
     }
 
-    if (isLoading) {
+    if (connectionState === 'connecting') {
       return (
         <div className={documentPaneStyles.loading}>
           <Spinner center message={`Loading ${schemaType.title}…`} delay={600} />
@@ -863,7 +861,7 @@ export default class DocumentPane extends React.PureComponent<Props, State> {
           {inspect && !this.historyIsOpen() && value && (
             <InspectView value={value} onClose={this.handleHideInspector} />
           )}
-          {!isConnected && (
+          {connectionState === 'reconnecting' && (
             <Snackbar kind="warning" isPersisted title="Connection lost. Reconnecting…" />
           )}
           <DocumentOperationResults id={options.id} type={options.type} />

diff --git a/packages/@sanity/desk-tool/src/pane/DocumentPaneProvider.tsx b/packages/@sanity/desk-tool/src/pane/DocumentPaneProvider.tsx
@@ -44,7 +44,7 @@ export const DocumentPaneProvider = withInitialValue((props: Props) => {
   const {patch}: any = useDocumentOperation(props.options.id, props.options.type)
   const editState: any = useEditState(props.options.id, props.options.type)
   const {markers} = useValidationStatus(props.options.id, props.options.type)
-  const {isConnected} = useConnectionState(props.options.id, props.options.type)
+  const connectionState = useConnectionState(props.options.id, props.options.type)
 
   const onChange = React.useCallback(
     patches => {
@@ -59,11 +59,10 @@ export const DocumentPaneProvider = withInitialValue((props: Props) => {
       {...props}
       onChange={onChange}
       markers={markers}
-      isConnected={isConnected}
+      connectionState={connectionState}
       value={value}
       draft={editState && editState.draft}
       published={editState && editState.published}
-      isLoading={!editState}
     />
   )
 })