fix: Removes UI blinking while loading the document

microsoft · Dec 3, 2024 · 89041e1 · 89041e1
1 parent 711689a
commit 89041e1
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/src/webviews/Document/DocumentPanel.tsx b/src/webviews/Document/DocumentPanel.tsx
@@ -95,7 +95,7 @@ export const DocumentPanel = () => {
     const state = useDocumentState();
     const dispatcher = useDocumentDispatcher();
 
-    const isInit = state.isInit;
+    const isReady = state.isReady;
     const isReadOnly = state.mode === 'view';
     const inProgress = state.isSaving || state.isRefreshing;
     const hasDocumentInDB = state.documentId !== '';
@@ -179,7 +179,7 @@ export const DocumentPanel = () => {
         void dispatcher?.notifyDirty?.(state.isDirty);
     }, [dispatcher, state.isDirty]);
 
-    if (!isInit || !state.currentDocumentContent) {
+    if (!isReady || !state.currentDocumentContent) {
         return (
             <section className={classes.container}>
                 <ProgressBar />

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

diff --git a/src/webviews/Document/state/DocumentState.tsx b/src/webviews/Document/state/DocumentState.tsx
@@ -66,7 +66,7 @@ export type DocumentState = {
     isDirty: boolean; // Document has been modified
     isSaving: boolean; // Document is being saved
     isRefreshing: boolean; // Document is being refreshed
-    isInit: boolean; // Document is being initialized
+    isReady: boolean; // Document is being initialized
 
     currentDocumentContent: string; // Current content of the document
     error: string | undefined; // Error message
@@ -83,7 +83,7 @@ export const defaultState: DocumentState = {
     isDirty: false,
     isSaving: false,
     isRefreshing: false,
-    isInit: false,
+    isReady: false,
     currentDocumentContent: '',
     error: undefined,
 };
@@ -108,7 +108,7 @@ export function dispatch(state: DocumentState, action: DispatchAction): Document
                 documentId: action.documentId,
                 dbName: action.databaseId,
                 collectionName: action.containerId,
-                isInit: true,
+                isReady: true,
             };
         case 'setDocument':
             return {