Add explicit loading flag

Author: jpenilla

web/src/lib/diff-viewer-multi-file.svelte.ts

@@ -338,7 +338,8 @@ export class MultiFileDiffViewerState {
     activeSearchResult: ActiveSearchResult | null = $state(null);
     sidebarCollapsed = $state(false);
     diffMetadata: DiffMetadata | null = $state(null);
-    readonly progressBar = $state(new ProgressBarState(100, 100));
+    loading: boolean = $state(false);
+    readonly progressBar = $state(new ProgressBarState(null, 100));
 
     readonly fileTreeFilterDebounced = new Debounced(() => this.fileTreeFilter, 500);
     readonly searchQueryDebounced = new Debounced(() => this.searchQuery, 500);
@@ -478,8 +479,13 @@ export class MultiFileDiffViewerState {
     }
 
     async loadPatches(meta: () => Promise<DiffMetadata>, patches: () => Promise<AsyncGenerator<FileDetails, void>>) {
+        if (this.loading) {
+            alert("Already loading patches, please wait.");
+            return false;
+        }
         try {
             this.progressBar.setSpinning();
+            this.loading = true;
             await tick();
             await animationFramePromise();
 
@@ -510,9 +516,7 @@ export class MultiFileDiffViewerState {
             alert("Failed to load patches: " + e);
             return false;
         } finally {
-            if (!this.progressBar.isDone()) {
-                this.progressBar.setProgress(100, 100);
-            }
+            this.loading = false;
         }
     }
 

web/src/routes/+page.svelte

@@ -138,7 +138,7 @@
     </SettingsPopover>
 {/snippet}
 
-{#if !viewer.progressBar.isDone()}
+{#if viewer.loading}
     <div class="absolute bottom-1/2 left-1/2 z-50 -translate-x-1/2 translate-y-1/2 rounded-full border bg-neutral p-2 shadow-md">
         <ProgressBar bind:state={viewer.progressBar} class="h-2 w-32" />
     </div>

web/src/routes/OpenDiffDialog.svelte

@@ -118,7 +118,6 @@
             status = "renamed_modified";
         }
 
-        viewer.progressBar.setSpinning();
         const img = makeImageDetails(fileAMeta.name, fileBMeta.name, status, blobA, blobB);
         img.image.load = true; // load images by default when comparing two files directly
         yield img;
@@ -136,7 +135,6 @@
             return;
         }
 
-        viewer.progressBar.setSpinning();
         const diff = createTwoFilesPatch(fileAMeta.name, fileBMeta.name, textA, textB);
         let status: FileStatus = "modified";
         if (fileAMeta.name !== fileBMeta.name) {