Add loading indicators for graph fetching and options loading

- Introduced `isFetchingGraph` state to manage loading state in the graph component.
- Updated `CodeGraph` to display a loading spinner while fetching the graph.
- Enhanced `Combobox` to show a loading state when fetching options.

Author: Anchel123

app/src/components/code-graph.tsx

@@ -2,7 +2,7 @@ import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react";
 import { Graph, GraphData, Node, Link } from "./model";
 import { Toolbar } from "./toolbar";
 import { Labels } from "./labels";
-import { Download, GitFork, Search, X } from "lucide-react";
+import { Download, GitFork, Loader2, Search, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import ElementMenu from "./elementMenu";
 import Combobox from "./combobox";
@@ -28,6 +28,7 @@ interface Props {
     data: GraphData,
     setData: Dispatch<SetStateAction<GraphData>>,
     onFetchGraph: (graphName: string) => Promise<void>,
+    isFetchingGraph: boolean,
     onFetchNode: (nodeIds: number[]) => Promise<GraphData>,
     options: string[]
     setOptions: Dispatch<SetStateAction<string[]>>
@@ -58,9 +59,8 @@ export function CodeGraph({
     data,
     setData,
     onFetchGraph,
+    isFetchingGraph,
     onFetchNode,
-    options,
-    setOptions,
     isShowPath,
     setPath,
     canvasRef,
@@ -93,6 +93,7 @@ export function CodeGraph({
     const [commitIndex, setCommitIndex] = useState<number>(0);
     const [currentCommit, setCurrentCommit] = useState(0);
     const containerRef = useRef<HTMLDivElement>(null);
+    const [options, setOptions] = useState<string[]>([]);
 
     useEffect(() => {
         setData({ ...graph.Elements })
@@ -516,10 +517,18 @@ export function CodeGraph({
                                     </div>
                                 </div>
                             </div>
-                            : <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
-                                <GitFork className="md:w-24 md:h-24 w-16 h-16" />
-                                <h1 className="md:text-4xl text-2xl text-center">Select a repo to show its graph here</h1>
-                            </div>
+                            : (
+                                isFetchingGraph ?
+                                    <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
+                                        <Loader2 className="md:w-24 md:h-24 w-16 h-16 animate-spin" />
+                                        <h1 className="md:text-4xl text-2xl text-center">Fetching graph...</h1>
+                                    </div>
+                                    :
+                                    <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
+                                        <GitFork className="md:w-24 md:h-24 w-16 h-16" />
+                                        <h1 className="md:text-4xl text-2xl text-center">Select a repo to show its graph here</h1>
+                                    </div>
+                            )
                     }
                 </main>
                 {/* {

app/src/components/combobox.tsx

@@ -1,5 +1,6 @@
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { toast } from "@/components/ui/use-toast";
+import { Loader2 } from "lucide-react";
 import { useEffect, useState } from "react";
 
 const AUTH_HEADERS: HeadersInit = import.meta.env.VITE_SECRET_TOKEN
@@ -17,60 +18,86 @@ interface Props {
 export default function Combobox({ options, setOptions, selectedValue, onSelectedValue }: Props) {
 
     const [open, setOpen] = useState(false)
-    const [lastOpened, setLastOpened] = useState<number>();
+    const [lastFetch, setLastFetch] = useState<number>();
+    const [isFetchingOptions, setIsFetchingOptions] = useState(false)
 
     const fetchOptions = async () => {
-        const result = await fetch(`/api/list_repos`, {
-            method: 'GET',
-            headers: {
-                ...AUTH_HEADERS,
-            },
-        })
+        setIsFetchingOptions(true)
 
-        if (!result.ok) {
+        try {
+            const result = await fetch(`/api/list_repos`, {
+                method: 'GET',
+                headers: {
+                    ...AUTH_HEADERS,
+                },
+            })
+
+            if (!result.ok) {
+                toast({
+                    variant: "destructive",
+                    title: "Uh oh! Something went wrong.",
+                    description: await result.text(),
+                })
+                return 
+            }
+
+            const json = await result.json()
+            setOptions(json.repositories)
+        } catch {
             toast({
                 variant: "destructive",
                 title: "Uh oh! Something went wrong.",
-                description: await result.text(),
+                description: "Failed to fetch repositories. Please try again.",
             })
-            return
+        } finally {
+            setIsFetchingOptions(false)
         }
-
-        const json = await result.json()
-        setOptions(json.repositories)
     }
 
     useEffect(() => {
         fetchOptions()
     }, [])
 
+    //fetch options when the combobox is opened
     useEffect(() => {
         if (!open) return
 
         const now = Date.now();
 
-        if (lastOpened && now - lastOpened < 30000) return;
-
-        setLastOpened(now);
-
+        //check if last fetch was less than 30 seconds ago
+        if (lastFetch && now - lastFetch < 30000) return;
+        
+        setLastFetch(now);
+        
         fetchOptions()
     }, [open])
 
     return (
-        <Select open={open} onOpenChange={setOpen} value={selectedValue} onValueChange={onSelectedValue}>
+        <Select open={open} onOpenChange={setOpen} disabled={isFetchingOptions || options.length === 0} value={options.length !== 0 ? selectedValue : undefined} onValueChange={onSelectedValue}>
             <SelectTrigger className="z-10 md:z-0 rounded-md border border-border focus:ring-1 focus:ring-primary">
                 <SelectValue placeholder="Select a repo" />
             </SelectTrigger>
             <SelectContent>
                 {
-                    options.length !== 0 &&
-                    options.map((option) => (
-                        <SelectItem key={option} value={option}>
-                            {option}
+                    isFetchingOptions ?
+                        <SelectItem value="Fetching options...">
+                            <div className="flex flex-row items-center gap-2">
+                                <Loader2 className="w-4 h-4 animate-spin" />
+                                <p>Fetching options...</p>
+                            </div>
                         </SelectItem>
-                    ))
+                        : options.length !== 0 ?
+                            options.map((option) => (
+                                <SelectItem key={option} value={option}>
+                                    {option}
+                                </SelectItem>
+                            ))
+                            :
+                            <SelectItem value="No options found">
+                                <p>No options found</p>
+                            </SelectItem>
                 }
             </SelectContent>
         </Select>
     )
-}
+}