From cdf2f5d772014db5ce803295f80c38fbfc7cf100 Mon Sep 17 00:00:00 2001
From: Will Chen <willchen90@gmail.com>
Date: Mon, 26 May 2025 11:51:00 -0700
Subject: [PATCH] Show a loading bar when checkout is happening (#249)

---
 src/components/chat/ChatHeader.tsx |  9 ++++++++-
 src/components/ui/LoadingBar.tsx   | 20 ++++++++++++++++++++
 src/hooks/useCheckoutVersion.ts    | 10 +++++++++-
 src/store/appAtoms.ts              | 15 +++++++++++++++
 src/styles/globals.css             | 13 +++++++++++++
 5 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ui/LoadingBar.tsx
 create mode 100644 src/store/appAtoms.ts

diff --git a/src/components/chat/ChatHeader.tsx b/src/components/chat/ChatHeader.tsx
index 7a75080..2c8d806 100644
--- a/src/components/chat/ChatHeader.tsx
+++ b/src/components/chat/ChatHeader.tsx
@@ -26,6 +26,8 @@ import { useStreamChat } from "@/hooks/useStreamChat";
 import { useCurrentBranch } from "@/hooks/useCurrentBranch";
 import { useCheckoutVersion } from "@/hooks/useCheckoutVersion";
 import { useRenameBranch } from "@/hooks/useRenameBranch";
+import { isAnyCheckoutVersionInProgressAtom } from "@/store/appAtoms";
+import { LoadingBar } from "../ui/LoadingBar";
 
 interface ChatHeaderProps {
   isVersionPaneOpen: boolean;
@@ -46,6 +48,9 @@ export function ChatHeader({
   const [selectedChatId, setSelectedChatId] = useAtom(selectedChatIdAtom);
   const { refreshChats } = useChats(appId);
   const { isStreaming } = useStreamChat();
+  const isAnyCheckoutVersionInProgress = useAtomValue(
+    isAnyCheckoutVersionInProgressAtom,
+  );
 
   const {
     branchInfo,
@@ -102,6 +107,7 @@ export function ChatHeader({
 
   return (
     <div className="flex flex-col w-full @container">
+      <LoadingBar isVisible={isAnyCheckoutVersionInProgress} />
       {/* If the version pane is open, it's expected to not always be on the main branch. */}
       {isNotMainBranch && !isVersionPaneOpen && (
         <div className="flex flex-col @sm:flex-row items-center justify-between px-4 py-2 bg-amber-100 dark:bg-amber-900 text-amber-800 dark:text-amber-200">
@@ -161,7 +167,8 @@ export function ChatHeader({
         </div>
       )}
 
-      <div className="@container flex items-center justify-between py-1.5">
+      {/* Why is this pt-0.5? Because the loading bar is h-1 (it always takes space) and we want the vertical spacing to be consistent.*/}
+      <div className="@container flex items-center justify-between pb-1.5 pt-0.5">
         <div className="flex items-center space-x-2">
           <Button
             onClick={handleNewChat}
diff --git a/src/components/ui/LoadingBar.tsx b/src/components/ui/LoadingBar.tsx
new file mode 100644
index 0000000..5183605
--- /dev/null
+++ b/src/components/ui/LoadingBar.tsx
@@ -0,0 +1,20 @@
+import { cn } from "@/lib/utils";
+import React from "react";
+
+export const LoadingBar: React.FC<{ isVisible: boolean }> = ({ isVisible }) => {
+  return (
+    <div
+      key="loading-bar"
+      className={cn(
+        "relative w-full h-1 bg-primary/20 overflow-hidden",
+        isVisible ? "" : "invisible",
+      )}
+    >
+      <div
+        className={cn(
+          "absolute top-0 left-0 h-full w-1/2 bg-primary animate-marquee",
+        )}
+      />
+    </div>
+  );
+};
diff --git a/src/hooks/useCheckoutVersion.ts b/src/hooks/useCheckoutVersion.ts
index b470843..f7972fe 100644
--- a/src/hooks/useCheckoutVersion.ts
+++ b/src/hooks/useCheckoutVersion.ts
@@ -1,5 +1,7 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { IpcClient } from "@/ipc/ipc_client";
+import { useSetAtom } from "jotai";
+import { activeCheckoutCounterAtom } from "@/store/appAtoms";
 
 interface CheckoutVersionVariables {
   appId: number;
@@ -8,6 +10,7 @@ interface CheckoutVersionVariables {
 
 export function useCheckoutVersion() {
   const queryClient = useQueryClient();
+  const setActiveCheckouts = useSetAtom(activeCheckoutCounterAtom);
 
   const { isPending: isCheckingOutVersion, mutateAsync: checkoutVersion } =
     useMutation<void, Error, CheckoutVersionVariables>({
@@ -17,7 +20,12 @@ export function useCheckoutVersion() {
           throw new Error("App ID is null, cannot checkout version.");
         }
         const ipcClient = IpcClient.getInstance();
-        await ipcClient.checkoutVersion({ appId, versionId });
+        setActiveCheckouts((prev) => prev + 1); // Increment counter
+        try {
+          await ipcClient.checkoutVersion({ appId, versionId });
+        } finally {
+          setActiveCheckouts((prev) => prev - 1); // Decrement counter
+        }
       },
       onSuccess: (_, variables) => {
         // Invalidate queries that depend on the current version/branch
diff --git a/src/store/appAtoms.ts b/src/store/appAtoms.ts
new file mode 100644
index 0000000..4b61233
--- /dev/null
+++ b/src/store/appAtoms.ts
@@ -0,0 +1,15 @@
+import { atom } from "jotai";
+
+/**
+ * Atom to store the number of active checkoutVersion mutations.
+ * This is a "primitive" atom that you will update directly.
+ */
+export const activeCheckoutCounterAtom = atom(0);
+
+/**
+ * Derived atom that is true if any checkoutVersion mutation is in progress.
+ * This atom is read-only and derives its state from activeCheckoutCounterAtom.
+ */
+export const isAnyCheckoutVersionInProgressAtom = atom(
+  (get) => get(activeCheckoutCounterAtom) > 0,
+);
diff --git a/src/styles/globals.css b/src/styles/globals.css
index b5e2c81..e0fc7f5 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -280,3 +280,16 @@
     width: 0;
   }
 }
+
+@keyframes marquee {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(200%);
+  }
+}
+
+.animate-marquee {
+  animation: marquee 2s linear infinite;
+}