Add progress indicator while loading patches and directories

jpenilla · jpenilla · commit 7ae99dcc1f58 · 2025-07-29T09:51:10.000-07:00
diff --git a/web/src/lib/components/files/DirectoryInput.svelte b/web/src/lib/components/files/DirectoryInput.svelte
@@ -1,31 +1,24 @@
 <script lang="ts">
-    import { type RestProps } from "$lib/types";
-    import { type Snippet } from "svelte";
     import { Button, mergeProps } from "bits-ui";
-    import { type DirectoryEntry, pickDirectory } from "$lib/components/files/index.svelte";
+    import { type DirectoryEntry, type DirectoryInputProps, DirectoryInputState } from "$lib/components/files/index.svelte";
+    import { box } from "svelte-toolbelt";
 
-    type Props = {
-        children?: Snippet<[{ directory?: DirectoryEntry }]>;
-        directory?: DirectoryEntry;
-    } & RestProps;
+    let { children, directory = $bindable<DirectoryEntry | undefined>(), loading = $bindable(false), ...restProps }: DirectoryInputProps = $props();
 
-    let { children, directory = $bindable<DirectoryEntry | undefined>(undefined), ...restProps }: Props = $props();
+    const instance = new DirectoryInputState({
+        directory: box.with(
+            () => directory,
+            (v) => (directory = v),
+        ),
+        loading: box.with(
+            () => loading,
+            (v) => (loading = v),
+        ),
+    });
 
-    async function onclick() {
-        try {
-            directory = await pickDirectory();
-        } catch (e) {
-            if (e instanceof Error && e.name === "AbortError") {
-                return;
-            } else {
-                console.error("Failed to pick directory", e);
-            }
-        }
-    }
-
-    const mergedProps = mergeProps({ onclick }, restProps);
+    const mergedProps = $derived(mergeProps(instance.props, restProps));
 </script>
 
 <Button.Root type="button" {...mergedProps}>
-    {@render children?.({ directory })}
+    {@render children?.({ directory, loading })}
 </Button.Root>
diff --git a/web/src/lib/components/files/DirectorySelect.svelte b/web/src/lib/components/files/DirectorySelect.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import DirectoryInput from "$lib/components/files/DirectoryInput.svelte";
     import { type DirectoryEntry } from "$lib/components/files/index.svelte";
+    import Spinner from "$lib/components/Spinner.svelte";
 
     interface Props {
         placeholder: string;
@@ -11,13 +12,16 @@
 </script>
 
 <DirectoryInput class="flex max-w-full items-center gap-2 rounded-md border btn-ghost px-2 py-1" bind:directory>
-    {#snippet children({ directory })}
+    {#snippet children({ directory, loading })}
         <span class="iconify size-4 shrink-0 text-em-disabled octicon--file-directory-16"></span>
-        {#if directory}
+        {#if !loading && directory}
             <span class="truncate">{directory.fileName}</span>
         {:else}
             <span class="font-light">{placeholder}</span>
         {/if}
+        {#if loading}
+            <Spinner size={4} />
+        {/if}
         <span class="iconify size-4 shrink-0 text-em-disabled octicon--triangle-down-16"></span>
     {/snippet}
 </DirectoryInput>
diff --git a/web/src/lib/components/files/index.svelte.ts b/web/src/lib/components/files/index.svelte.ts
@@ -1,6 +1,8 @@
-import { type ReadableBoxedValues } from "svelte-toolbelt";
+import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import { getExtensionForLanguage, lazyPromise } from "$lib/util";
 import type { BundledLanguage, SpecialLanguage } from "shiki";
+import type { Snippet } from "svelte";
+import type { RestProps } from "$lib/types";
 
 export interface FileSystemEntry {
     fileName: string;
@@ -26,7 +28,51 @@ export class FileEntry implements FileSystemEntry {
     }
 }
 
-export async function pickDirectory(): Promise<DirectoryEntry> {
+export type DirectoryInputProps = {
+    children?: Snippet<[{ directory?: DirectoryEntry; loading: boolean }]>;
+    directory?: DirectoryEntry;
+    loading?: boolean;
+} & RestProps;
+
+export type DirectoryInputStateProps = WritableBoxedValues<{
+    directory: DirectoryEntry | undefined;
+    loading: boolean;
+}>;
+
+export class DirectoryInputState {
+    private readonly opts: DirectoryInputStateProps;
+
+    constructor(opts: DirectoryInputStateProps) {
+        this.opts = opts;
+        this.onclick = this.onclick.bind(this);
+    }
+
+    get props() {
+        return {
+            onclick: this.onclick,
+        };
+    }
+
+    async onclick() {
+        if (this.opts.loading.current) {
+            return;
+        }
+        try {
+            this.opts.loading.current = true;
+            this.opts.directory.current = await pickDirectory();
+        } catch (e) {
+            if (e instanceof Error && e.name === "AbortError") {
+                return;
+            } else {
+                console.error("Failed to pick directory", e);
+            }
+        } finally {
+            this.opts.loading.current = false;
+        }
+    }
+}
+
+async function pickDirectory(): Promise<DirectoryEntry> {
     if (!window.showDirectoryPicker) {
         return await pickDirectoryLegacy();
     }
diff --git a/web/src/lib/components/progress-bar/ProgressBar.svelte b/web/src/lib/components/progress-bar/ProgressBar.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { mergeProps, Progress } from "bits-ui";
+    import { type ProgressBarProps, useProgressBarState } from "$lib/components/progress-bar/index.svelte";
+
+    let { state = $bindable(), ...restProps }: ProgressBarProps = $props();
+
+    state = useProgressBarState(state);
+
+    const mergedProps = $derived(
+        mergeProps(
+            {
+                class: "bg-em-disabled/30 inset-shadow-xs relative overflow-hidden rounded-full",
+            },
+            restProps,
+        ),
+    );
+</script>
+
+<Progress.Root value={state.value} max={state.max} {...mergedProps}>
+    {@const percent = state.getPercent()}
+    {#if percent !== undefined}
+        <div
+            class="h-full w-full rounded-full bg-primary drop-shadow-sm drop-shadow-primary/50 transition-all duration-250 ease-in-out"
+            style={`transform: translateX(-${100 - percent}%)`}
+        ></div>
+    {:else}
+        <div id="spinner" class="h-full w-[20%] rounded-full bg-primary drop-shadow-sm drop-shadow-primary/50"></div>
+    {/if}
+</Progress.Root>
+
+<style>
+    #spinner {
+        animation: slide 1s linear infinite alternate;
+    }
+
+    @keyframes slide {
+        0% {
+            transform: translateX(0%);
+        }
+        100% {
+            transform: translateX(400%);
+        }
+    }
+</style>
diff --git a/web/src/lib/components/progress-bar/index.svelte.ts b/web/src/lib/components/progress-bar/index.svelte.ts
@@ -0,0 +1,47 @@
+import type { RestProps } from "$lib/types";
+
+export interface ProgressBarProps extends RestProps {
+    state?: ProgressBarState | undefined;
+}
+
+export function useProgressBarState(state: ProgressBarState | undefined): ProgressBarState {
+    return state === undefined ? new ProgressBarState(0, 100) : state;
+}
+
+export class ProgressBarState {
+    value: number | null = $state(null);
+    max: number = $state(100);
+
+    constructor(value: number | null, max: number) {
+        this.value = value;
+        this.max = max;
+    }
+
+    setProgress(value: number, max: number) {
+        this.value = value;
+        this.max = max;
+    }
+
+    setSpinning() {
+        this.value = null;
+        this.max = 100;
+    }
+
+    isSpinning(): boolean {
+        return this.value === null;
+    }
+
+    isDone(): boolean {
+        return this.value !== null && this.value >= this.max;
+    }
+
+    getPercent(): number | undefined {
+        if (this.value === null) {
+            return undefined;
+        }
+        if (this.max <= 0) {
+            return 0;
+        }
+        return (this.value / this.max) * 100;
+    }
+}
diff --git a/web/src/lib/diff-viewer-multi-file.svelte.ts b/web/src/lib/diff-viewer-multi-file.svelte.ts
@@ -17,6 +17,7 @@ import { type TreeNode, TreeState } from "$lib/components/tree/index.svelte";
 import { VList } from "virtua/svelte";
 import { Context, Debounced } from "runed";
 import { MediaQuery } from "svelte/reactivity";
+import { ProgressBarState } from "$lib/components/progress-bar/index.svelte";
 
 export type SidebarLocation = "left" | "right";
 
@@ -327,6 +328,7 @@ export class MultiFileDiffViewerState {
     activeSearchResult: ActiveSearchResult | null = $state(null);
     sidebarCollapsed = $state(false);
     diffMetadata: DiffMetadata | null = $state(null);
+    readonly progressBar = $state(new ProgressBarState(100, 100));
 
     readonly fileTreeFilterDebounced = new Debounced(() => this.fileTreeFilter, 500);
     readonly searchQueryDebounced = new Debounced(() => this.searchQuery, 500);
@@ -457,15 +459,20 @@ export class MultiFileDiffViewerState {
         // Reset state
         this.collapsed = [];
         this.checked = [];
+        this.diffMetadata = null;
         this.fileDetails = [];
         this.clearImages();
         this.vlist?.scrollToIndex(0, { align: "start" });
-        this.diffMetadata = meta;
 
+        // Load new state
+        this.diffMetadata = meta;
         patches.sort(compareFileDetails);
-
-        // Set this last since it's what the VList loads
         this.fileDetails.push(...patches);
+
+        // in case the caller didn't close the progress
+        if (!this.progressBar.isDone()) {
+            this.progressBar.setProgress(100, 100);
+        }
     }
 
     // TODO fails for initial commit?
@@ -476,10 +483,12 @@ export class MultiFileDiffViewerState {
 
         try {
             if (type === "commit") {
+                this.progressBar.setSpinning();
                 const { info, files } = await fetchGithubCommitDiff(token, owner, repo, id.split("/")[0]);
                 this.loadPatches(files, { type: "github", details: info });
                 return true;
             } else if (type === "pull") {
+                this.progressBar.setSpinning();
                 const { info, files } = await fetchGithubPRComparison(token, owner, repo, id.split("/")[0]);
                 this.loadPatches(files, { type: "github", details: info });
                 return true;
@@ -492,6 +501,7 @@ export class MultiFileDiffViewerState {
                         return false;
                     }
                 }
+                this.progressBar.setSpinning();
                 const base = refs[0];
                 const head = refs[1];
                 const { info, files } = await fetchGithubComparison(token, owner, repo, base, head);
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
@@ -33,6 +33,7 @@
     import { onClickOutside } from "runed";
     import SidebarToggle from "./SidebarToggle.svelte";
     import type { PageProps } from "./$types";
+    import ProgressBar from "$lib/components/progress-bar/ProgressBar.svelte";
 
     let { data }: PageProps = $props();
     const globalOptions = GlobalOptions.init(data.globalOptions);
@@ -137,6 +138,12 @@
     </SettingsPopover>
 {/snippet}
 
+{#if !viewer.progressBar.isDone()}
+    <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>
+{/if}
+
 <div class="relative flex min-h-screen flex-row justify-center">
     <div
         bind:this={sidebarElement}
diff --git a/web/src/routes/OpenDiffDialog.svelte b/web/src/routes/OpenDiffDialog.svelte
@@ -6,7 +6,7 @@
     import { goto } from "$app/navigation";
     import { type FileDetails, makeImageDetails, makeTextDetails, MultiFileDiffViewerState } from "$lib/diff-viewer-multi-file.svelte";
     import { binaryFileDummyDetails, bytesEqual, isBinaryFile, isImageFile, splitMultiFilePatch } from "$lib/util";
-    import { onMount } from "svelte";
+    import { onMount, tick } from "svelte";
     import { createTwoFilesPatch } from "diff";
     import DirectorySelect from "$lib/components/files/DirectorySelect.svelte";
     import { DirectoryEntry, FileEntry, MultimodalFileInputState } from "$lib/components/files/index.svelte";
@@ -96,6 +96,7 @@
                 status = "renamed_modified";
             }
 
+            viewer.progressBar.setSpinning();
             const img = makeImageDetails(fileA.metadata.name, fileB.metadata.name, status, blobA, blobB);
             img.image.load = true; // load images by default when comparing two files directly
             fileDetails.push(img);
@@ -106,6 +107,7 @@
                 return;
             }
 
+            viewer.progressBar.setSpinning();
             const diff = createTwoFilesPatch(fileA.metadata.name, fileB.metadata.name, textA, textB);
             let status: FileStatus = "modified";
             if (fileA.metadata.name !== fileB.metadata.name) {
@@ -132,6 +134,7 @@
             alert("Both directories must be selected to compare.");
             return;
         }
+        viewer.progressBar.setSpinning();
 
         const blacklist = (entry: ProtoFileDetails) => {
             return !dirBlacklistRegexes.some((pattern) => pattern.test(entry.path));
@@ -231,6 +234,7 @@
             alert("No patch file selected.");
             return;
         }
+        const meta = patchFile.metadata;
         let text: string;
         try {
             const blob = await patchFile.resolve();
@@ -240,14 +244,23 @@
             alert("Failed to resolve patch file: " + e);
             return;
         }
-        const files = splitMultiFilePatch(text);
-        if (files.length === 0) {
-            alert("No valid patches found in the file.");
-            return;
-        }
         modalOpen = false;
-        viewer.loadPatches(files, { type: "file", fileName: patchFile.metadata.name });
-        await updateUrlParams();
+        viewer.progressBar.setSpinning();
+        requestAnimationFrame(async () => {
+            await tick();
+
+            requestAnimationFrame(async () => {
+                const files = splitMultiFilePatch(text);
+                if (files.length === 0) {
+                    modalOpen = true;
+                    viewer.progressBar.setProgress(100, 100);
+                    alert("No valid patches found in the file.");
+                    return;
+                }
+                viewer.loadPatches(files, { type: "file", fileName: meta.name });
+                await updateUrlParams();
+            });
+        });
     }
 
     async function handleGithubUrl() {
