Add loading progress

Author: jpenilla

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

@@ -24,7 +24,7 @@ import { countOccurrences, type FileTreeNodeData, makeFileTree, type LazyPromise
 import { onDestroy, tick } from "svelte";
 import { type TreeNode, TreeState } from "$lib/components/tree/index.svelte";
 import { VList } from "virtua/svelte";
-import { Context, Debounced } from "runed";
+import { Context, Debounced, watch } from "runed";
 import { MediaQuery } from "svelte/reactivity";
 import { ProgressBarState } from "$lib/components/progress-bar/index.svelte";
 
@@ -338,8 +338,7 @@ export class MultiFileDiffViewerState {
     activeSearchResult: ActiveSearchResult | null = $state(null);
     sidebarCollapsed = $state(false);
     diffMetadata: DiffMetadata | null = $state(null);
-    loading: boolean = $state(false);
-    readonly progressBar = $state(new ProgressBarState(null, 100));
+    readonly loadingState: LoadingState = $state(new LoadingState());
 
     readonly fileTreeFilterDebounced = new Debounced(() => this.fileTreeFilter, 500);
     readonly searchQueryDebounced = new Debounced(() => this.searchQuery, 500);
@@ -479,13 +478,12 @@ export class MultiFileDiffViewerState {
     }
 
     async loadPatches(meta: () => Promise<DiffMetadata>, patches: () => Promise<AsyncGenerator<FileDetails, void>>) {
-        if (this.loading) {
+        if (this.loadingState.loading) {
             alert("Already loading patches, please wait.");
             return false;
         }
         try {
-            this.progressBar.setSpinning();
-            this.loading = true;
+            this.loadingState.start();
             await tick();
             await animationFramePromise();
 
@@ -501,8 +499,14 @@ export class MultiFileDiffViewerState {
 
             const tempDetails: FileDetails[] = [];
             for await (const details of generator) {
+                this.loadingState.loadedCount++;
+
                 // Pushing directly to the main array causes too many signals to update (lag)
                 tempDetails.push(details);
+
+                // TODO this makes it load one patch per frame
+                await tick();
+                await animationFramePromise();
             }
             if (tempDetails.length === 0) {
                 throw new Error("No valid patches found in the provided data.");
@@ -516,7 +520,7 @@ export class MultiFileDiffViewerState {
             alert("Failed to load patches: " + e);
             return false;
         } finally {
-            this.loading = false;
+            this.loadingState.done();
         }
     }
 
@@ -527,7 +531,7 @@ export class MultiFileDiffViewerState {
             },
             async () => {
                 const result = await resultPromise;
-                return parseMultiFilePatchGithub(result.info, await result.response);
+                return parseMultiFilePatchGithub(result.info, await result.response, this.loadingState);
             },
         );
     }
@@ -661,6 +665,34 @@ export class MultiFileDiffViewerState {
     }
 }
 
+export class LoadingState {
+    loading: boolean = $state(false);
+    loadedCount: number = $state(0);
+    totalCount: number | null = $state(0);
+    readonly progressBar = $state(new ProgressBarState(null, 100));
+
+    constructor() {
+        watch([() => this.loadedCount, () => this.totalCount], ([loadedCount, totalCount]) => {
+            if (totalCount === null || totalCount <= 0) {
+                this.progressBar.setSpinning();
+            } else {
+                this.progressBar.setProgress(loadedCount, totalCount);
+            }
+        });
+    }
+
+    start() {
+        this.loadedCount = 0;
+        this.totalCount = null;
+        this.progressBar.setSpinning();
+        this.loading = true;
+    }
+
+    done() {
+        this.loading = false;
+    }
+}
+
 export type ActiveSearchResult = {
     file: FileDetails;
     idx: number;

web/src/lib/github.svelte.ts

@@ -1,7 +1,7 @@
 import { browser } from "$app/environment";
 import type { components } from "@octokit/openapi-types";
 import { parseMultiFilePatch, trimCommitHash } from "$lib/util";
-import { makeImageDetails } from "$lib/diff-viewer-multi-file.svelte";
+import { LoadingState, makeImageDetails } from "$lib/diff-viewer-multi-file.svelte";
 import { PUBLIC_GITHUB_APP_NAME, PUBLIC_GITHUB_CLIENT_ID } from "$env/static/public";
 
 export const GITHUB_USERNAME_KEY = "github_username";
@@ -139,8 +139,8 @@ export async function fetchGithubPRInfo(token: string | null, owner: string, rep
     }
 }
 
-export function parseMultiFilePatchGithub(details: GithubDiff, patch: string) {
-    return parseMultiFilePatch(patch, (from, to, status) => {
+export function parseMultiFilePatchGithub(details: GithubDiff, patch: string, loadingState: LoadingState) {
+    return parseMultiFilePatch(patch, loadingState, (from, to, status) => {
         const token = getGithubToken();
         return makeImageDetails(
             from,

web/src/lib/util.ts

@@ -1,4 +1,4 @@
-import { type FileDetails, type ImageFileDetails, makeTextDetails } from "./diff-viewer-multi-file.svelte";
+import { type FileDetails, type ImageFileDetails, LoadingState, makeTextDetails } from "./diff-viewer-multi-file.svelte";
 import type { FileStatus } from "./github.svelte";
 import type { TreeNode } from "$lib/components/tree/index.svelte";
 import type { BundledLanguage, SpecialLanguage } from "shiki";
@@ -146,9 +146,11 @@ function parseHeader(patch: string, fromFile: string, toFile: string): BasicHead
 
 export function parseMultiFilePatch(
     patchContent: string,
+    loadingState: LoadingState,
     imageFactory?: (fromFile: string, toFile: string, status: FileStatus) => ImageFileDetails | null,
 ): AsyncGenerator<FileDetails> {
     const split = splitMultiFilePatch(patchContent);
+    loadingState.totalCount = split.length;
     async function* detailsGenerator() {
         for (const [header, content] of split) {
             if (header.binary) {

web/src/routes/+page.svelte

@@ -138,9 +138,9 @@
     </SettingsPopover>
 {/snippet}
 
-{#if viewer.loading}
+{#if viewer.loadingState.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" />
+        <ProgressBar bind:state={viewer.loadingState.progressBar} class="h-2 w-32" />
     </div>
 {/if}
 

web/src/routes/OpenDiffDialog.svelte

@@ -282,7 +282,7 @@
                 return { type: "file", fileName: meta.name };
             },
             async () => {
-                return parseMultiFilePatch(text);
+                return parseMultiFilePatch(text, viewer.loadingState);
             },
         );
         if (!success) {