Merge pull request #12873 from overleaf/td-history-loading-improvements

History migration: Improve loading logic and display for loading file diffs

GitOrigin-RevId: 9d20c4632e6a804cb21e6fffd52faa88bc03f01a

services/web/frontend/js/features/history/components/change-list/all-history-list.tsx

@@ -92,7 +92,10 @@ function AllHistoryList() {
       </div>
       {showOwnerPaywall ? <OwnerPaywallPrompt /> : null}
       {showNonOwnerPaywall ? <NonOwnerPaywallPrompt /> : null}
-      {loadingState === 'ready' ? null : <LoadingSpinner />}
+      {loadingState === 'loadingInitial' ||
+      loadingState === 'loadingUpdates' ? (
+        <LoadingSpinner />
+      ) : null}
     </div>
   )
 }

services/web/frontend/js/features/history/components/diff-view/diff-view.tsx

@@ -11,14 +11,15 @@ import ErrorMessage from '../error-message'
 
 function DiffView() {
   const [diff, setDiff] = useState<Nullable<Diff>>(null)
-  const { selection, projectId } = useHistoryContext()
+  const { selection, projectId, loadingState } = useHistoryContext()
+  const loadingFileDiffs = loadingState === 'loadingFileDiffs'
 
   const { isLoading, runAsync, error } = useAsync<DocDiffResponse>()
 
   const { updateRange, selectedFile } = selection
 
   useEffect(() => {
-    if (!updateRange || !selectedFile?.pathname) {
+    if (!updateRange || !selectedFile?.pathname || loadingFileDiffs) {
       return
     }
 
@@ -44,7 +45,7 @@ function DiffView() {
         setDiff(diff)
       })
       .catch(console.error)
-  }, [projectId, runAsync, updateRange, selectedFile])
+  }, [projectId, runAsync, updateRange, selectedFile, loadingFileDiffs])
 
   return (
     <div className="doc-panel">
@@ -56,7 +57,7 @@ function DiffView() {
             <Toolbar diff={diff} selection={selection} />
           </div>
           <div className="doc-container">
-            <Main diff={diff} isLoading={isLoading} />
+            <Main diff={diff} isLoading={isLoading || loadingFileDiffs} />
           </div>
         </>
       )}

services/web/frontend/js/features/history/context/history-context.tsx

@@ -133,7 +133,12 @@ function useHistory() {
       }
     }
 
-    if (updatesInfo.atEnd || loadingState === 'loadingUpdates') return
+    if (
+      updatesInfo.atEnd ||
+      !(loadingState === 'loadingInitial' || loadingState === 'ready')
+    ) {
+      return
+    }
 
     const updatesPromise = limitUpdates(
       fetchUpdates(projectId, updatesInfo.nextBeforeTimestamp)
@@ -193,11 +198,13 @@ function useHistory() {
 
   // Load files when the update selection changes
   useEffect(() => {
-    if (!updateRange || !filesEmpty) {
+    if (!updateRange || loadingState !== 'ready' || !filesEmpty) {
       return
     }
     const { fromV, toV } = updateRange
 
+    setLoadingState('loadingFileDiffs')
+
     diffFiles(projectId, fromV, toV)
       .then(({ diff: files }) => {
         const selectedFile = autoSelectFile(
@@ -223,7 +230,18 @@ function useHistory() {
       .catch(error => {
         setError(error)
       })
-  }, [updateRange, projectId, updates, comparing, setError, filesEmpty])
+      .finally(() => {
+        setLoadingState('ready')
+      })
+  }, [
+    updateRange,
+    projectId,
+    updates,
+    comparing,
+    setError,
+    loadingState,
+    filesEmpty,
+  ])
 
   useEffect(() => {
     // Set update range if there isn't one and updates have loaded

services/web/frontend/js/features/history/context/types/history-context-value.ts

@@ -6,6 +6,7 @@ import { Selection } from '../../services/types/selection'
 type LoadingState =
   | 'loadingInitial'
   | 'loadingUpdates'
+  | 'loadingFileDiffs'
   | 'restoringFile'
   | 'ready'