fix: Removes UI blinking while loading the document (#2471)

microsoft · Dec 4, 2024 · 086f08d · 086f08d
1 parent 20c2108
commit 086f08d
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git a/src/webviews/Document/DocumentPanel.tsx b/src/webviews/Document/DocumentPanel.tsx
@@ -95,9 +95,10 @@ export const DocumentPanel = () => {
     const state = useDocumentState();
     const dispatcher = useDocumentDispatcher();
 
+    const isReady = state.isReady;
     const isReadOnly = state.mode === 'view';
     const inProgress = state.isSaving || state.isRefreshing;
-    const hasDocumentInDB = state.documentId !== undefined;
+    const hasDocumentInDB = state.documentId !== '';
 
     const onSave = async () => {
         // Save document to the database
@@ -178,6 +179,14 @@ export const DocumentPanel = () => {
         void dispatcher?.notifyDirty?.(state.isDirty);
     }, [dispatcher, state.isDirty]);
 
+    if (!isReady || !state.currentDocumentContent) {
+        return (
+            <section className={classes.container}>
+                <ProgressBar />
+            </section>
+        );
+    }
+
     return (
         <section className={classes.container}>
             <UnsavedChangesDialog open={open} setOpen={setOpen} doAction={doAction} />

diff --git a/src/webviews/Document/DocumentToolbar.tsx b/src/webviews/Document/DocumentToolbar.tsx
@@ -20,9 +20,10 @@ export type DocumentToolbarProps = {
 export const DocumentToolbar = (props: DocumentToolbarProps) => {
     const state = useDocumentState();
 
+    const isReady = state.isReady;
     const inProgress = state.isSaving || state.isRefreshing;
-    const hasDocumentInDB = state.documentId !== undefined;
-    const isReadOnly = state.mode === 'view';
+    const hasDocumentInDB = state.documentId !== '';
+    const isReadOnly = isReady && state.mode === 'view'; // If the document is not initialized, it is considered as not state
     const isMac = navigator.platform.toLowerCase().includes('mac');
 
     const onSaveHotkeyTitle = isMac ? '\u2318 S' : 'Ctrl+S';
@@ -32,7 +33,7 @@ export const DocumentToolbar = (props: DocumentToolbarProps) => {
     return (
         <>
             <Toolbar size={'small'}>
-                {!isReadOnly && (
+                {isReady && !isReadOnly && (
                     <Tooltip
                         content={`Save document to the database (${onSaveHotkeyTitle})`}
                         relationship="description"
@@ -49,7 +50,7 @@ export const DocumentToolbar = (props: DocumentToolbarProps) => {
                         </ToolbarButton>
                     </Tooltip>
                 )}
-                {isReadOnly && (
+                {isReady && isReadOnly && (
                     <Tooltip
                         content={`Open document for editing (${onEditHotkeyTitle})`}
                         relationship="description"

diff --git a/src/webviews/Document/state/DocumentContextProvider.tsx b/src/webviews/Document/state/DocumentContextProvider.tsx
@@ -66,6 +66,7 @@ export class DocumentContextProvider extends BaseContextProvider {
                 }
 
                 this.dispatch({ type: 'initState', mode, databaseId, containerId, documentId, partitionKey });
+                this.dispatch({ type: 'setRefreshing', isRefreshing: true });
             },
         );
 

diff --git a/src/webviews/Document/state/DocumentState.tsx b/src/webviews/Document/state/DocumentState.tsx
@@ -66,6 +66,7 @@ export type DocumentState = {
     isDirty: boolean; // Document has been modified
     isSaving: boolean; // Document is being saved
     isRefreshing: boolean; // Document is being refreshed
+    isReady: boolean; // Document is being initialized
 
     currentDocumentContent: string; // Current content of the document
     error: string | undefined; // Error message
@@ -81,7 +82,8 @@ export const defaultState: DocumentState = {
     isValid: true,
     isDirty: false,
     isSaving: false,
-    isRefreshing: true,
+    isRefreshing: false,
+    isReady: false,
     currentDocumentContent: '',
     error: undefined,
 };
@@ -106,6 +108,7 @@ export function dispatch(state: DocumentState, action: DispatchAction): Document
                 documentId: action.documentId,
                 dbName: action.databaseId,
                 collectionName: action.containerId,
+                isReady: true,
             };
         case 'setDocument':
             return {
-Original file line number
+Diff line change
@@ Expand Up @@
                     }
                     this.dispatch({ type: 'initState', mode, databaseId, containerId, documentId, partitionKey });
+                    this.dispatch({ type: 'setRefreshing', isRefreshing: true });
                 },
             );
@@ Expand Down @@