feat: add skeleton loader to file explorer

frontend/components/editor/index.tsx

@@ -36,7 +36,7 @@ import { useSocket } from "@/context/SocketContext"
 import { Button } from "../ui/button"
 import React from "react"
 import { parseTSConfigToMonacoOptions } from "@/lib/tsconfig"
-import { deepMerge } from "@/lib/utils"
+import { cn, deepMerge } from "@/lib/utils"
 
 export default function CodeEditor({
   userData,
@@ -62,9 +62,9 @@ export default function CodeEditor({
   // This heartbeat is critical to preventing the E2B sandbox from timing out
   useEffect(() => {
     // 10000 ms = 10 seconds
-    const interval = setInterval(() => socket?.emit("heartbeat"), 10000);
+    const interval = setInterval(() => socket?.emit("heartbeat"), 10000)
-    return () => clearInterval(interval);
+    return () => clearInterval(interval)
-  }, [socket]);
+  }, [socket])
 
   //Preview Button state
   const [isPreviewCollapsed, setIsPreviewCollapsed] = useState(true)
@@ -80,7 +80,7 @@ export default function CodeEditor({
   const [activeFileContent, setActiveFileContent] = useState("")
   const [deletingFolderId, setDeletingFolderId] = useState("")
   // Added this state to track the most recent content for each file
-  const [fileContents, setFileContents] = useState<Record<string, string>>({});
+  const [fileContents, setFileContents] = useState<Record<string, string>>({})
 
   // Editor state
   const [editorLanguage, setEditorLanguage] = useState("plaintext")
@@ -462,16 +462,17 @@ export default function CodeEditor({
     const model = editorRef?.getModel()
     // added this because it was giving client side exception - Illegal value for lineNumber when opening an empty file
     if (model) {
-      const totalLines = model.getLineCount();
+      const totalLines = model.getLineCount()
       // Check if the cursorLine is a valid number, If cursorLine is out of bounds, we fall back to 1 (the first line) as a default safe value.
-      const lineNumber = cursorLine > 0 && cursorLine <= totalLines ? cursorLine : 1; // fallback to a valid line number
+      const lineNumber =
+        cursorLine > 0 && cursorLine <= totalLines ? cursorLine : 1 // fallback to a valid line number
       // If for some reason the content doesn't exist, we use an empty string as a fallback.
-      const line = model.getLineContent(lineNumber) ?? "";
+      const line = model.getLineContent(lineNumber) ?? ""
       // Check if the line is not empty or only whitespace (i.e., `.trim()` removes spaces).
       // If the line has content, we clear any decorations using the instance of the `decorations` object.
       // Decorations refer to editor highlights, underlines, or markers, so this clears those if conditions are met.
       if (line.trim() !== "") {
-        decorations.instance?.clear();
+        decorations.instance?.clear()
         return
       }
     }
@@ -497,28 +498,28 @@ export default function CodeEditor({
     debounce((activeFileId: string | undefined) => {
       if (activeFileId) {
         // Get the current content of the file
-        const content = fileContents[activeFileId];
+        const content = fileContents[activeFileId]
 
         // Mark the file as saved in the tabs
         setTabs((prev) =>
           prev.map((tab) =>
             tab.id === activeFileId ? { ...tab, saved: true } : tab
           )
-        );
+        )
-        console.log(`Saving file...${activeFileId}`);
+        console.log(`Saving file...${activeFileId}`)
-        console.log(`Saving file...${content}`);
+        console.log(`Saving file...${content}`)
-        socket?.emit("saveFile", activeFileId, content);
+        socket?.emit("saveFile", activeFileId, content)
       }
     }, Number(process.env.FILE_SAVE_DEBOUNCE_DELAY) || 1000),
     [socket, fileContents]
-  );
+  )
 
   // Keydown event listener to trigger file save on Ctrl+S or Cmd+S
   useEffect(() => {
     const down = (e: KeyboardEvent) => {
       if (e.key === "s" && (e.metaKey || e.ctrlKey)) {
         e.preventDefault()
-        debouncedSaveData(activeFileId);
+        debouncedSaveData(activeFileId)
       }
     }
     document.addEventListener("keydown", down)
@@ -685,46 +686,49 @@ export default function CodeEditor({
   } // 300ms debounce delay, adjust as needed
 
   const selectFile = (tab: TTab) => {
-    if (tab.id === activeFileId) return;
+    if (tab.id === activeFileId) return
 
-    setGenerate((prev) => ({ ...prev, show: false }));
+    setGenerate((prev) => ({ ...prev, show: false }))
 
     // Check if the tab already exists in the list of open tabs
-    const exists = tabs.find((t) => t.id === tab.id);
+    const exists = tabs.find((t) => t.id === tab.id)
     setTabs((prev) => {
       if (exists) {
         // If the tab exists, make it the active tab
-        setActiveFileId(exists.id);
+        setActiveFileId(exists.id)
-        return prev;
+        return prev
       }
       // If the tab doesn't exist, add it to the list of tabs and make it active
-      return [...prev, tab];
+      return [...prev, tab]
-    });
+    })
 
     // If the file's content is already cached, set it as the active content
     if (fileContents[tab.id]) {
-      setActiveFileContent(fileContents[tab.id]);
+      setActiveFileContent(fileContents[tab.id])
     } else {
       // Otherwise, fetch the content of the file and cache it
       debouncedGetFile(tab.id, (response: string) => {
-        setFileContents(prev => ({ ...prev, [tab.id]: response }));
+        setFileContents((prev) => ({ ...prev, [tab.id]: response }))
-        setActiveFileContent(response);
+        setActiveFileContent(response)
-      });
+      })
     }
 
     // Set the editor language based on the file type
-    setEditorLanguage(processFileType(tab.name));
+    setEditorLanguage(processFileType(tab.name))
     // Set the active file ID to the new tab
-    setActiveFileId(tab.id);
+    setActiveFileId(tab.id)
-  };
+  }
 
   // Added this effect to update fileContents when the editor content changes
   useEffect(() => {
     if (activeFileId) {
       // Cache the current active file content using the file ID as the key
-      setFileContents(prev => ({ ...prev, [activeFileId]: activeFileContent }));
+      setFileContents((prev) => ({
+        ...prev,
+        [activeFileId]: activeFileContent,
+      }))
     }
-  }, [activeFileContent, activeFileId]);
+  }, [activeFileContent, activeFileId])
 
   // Close tab and remove from tabs
   const closeTab = (id: string) => {
@@ -862,7 +866,10 @@ export default function CodeEditor({
             )}
           </AnimatePresence>
         </div>
-        <div className="z-50 p-1" ref={generateWidgetRef}>
+        <div
+          className={cn(generate.show && "z-50 p-1")}
+          ref={generateWidgetRef}
+        >
           {generate.show ? (
             <GenerateInput
               user={userData}
@@ -1012,7 +1019,7 @@ export default function CodeEditor({
                     onChange={(value) => {
                       // If the new content is different from the cached content, update it
                       if (value !== fileContents[activeFileId]) {
-                            setActiveFileContent(value ?? ""); // Update the active file content
+                        setActiveFileContent(value ?? "") // Update the active file content
                         // Mark the file as unsaved by setting 'saved' to false
                         setTabs((prev) =>
                           prev.map((tab) =>

frontend/components/editor/loading/index.tsx

@@ -84,8 +84,10 @@ export default function Loading({
             </div>
           </div>
           <div className="w-full mt-1 flex flex-col">
-            <div className="w-full flex justify-center">
+            <div className="w-full flex flex-col justify-center">
-              <Loader2 className="w-4 h-4 animate-spin" />
+              {new Array(6).fill(0).map((_, i) => (
+                <Skeleton key={i} className="h-[1.625rem] mb-0.5 rounded-sm" />
+              ))}
             </div>
           </div>
         </div>

frontend/components/editor/sidebar/index.tsx

@@ -1,4 +1,4 @@
-"use client";
+"use client"
 
 import {
   FilePlus,
@@ -7,20 +7,21 @@ import {
   MonitorPlay,
   Search,
   Sparkles,
-} from "lucide-react";
+} from "lucide-react"
-import SidebarFile from "./file";
+import SidebarFile from "./file"
-import SidebarFolder from "./folder";
+import SidebarFolder from "./folder"
-import { Sandbox, TFile, TFolder, TTab } from "@/lib/types";
+import { Sandbox, TFile, TFolder, TTab } from "@/lib/types"
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react"
-import New from "./new";
+import New from "./new"
-import { Socket } from "socket.io-client";
+import { Socket } from "socket.io-client"
-import { Switch } from "@/components/ui/switch";
+import { Switch } from "@/components/ui/switch"
 
 import {
   dropTargetForElements,
   monitorForElements,
-} from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+} from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
-import Button from "@/components/ui/customButton";
+import Button from "@/components/ui/customButton"
+import { Skeleton } from "@/components/ui/skeleton"
 
 export default function Sidebar({
   sandboxData,
@@ -34,75 +35,73 @@ export default function Sidebar({
   addNew,
   deletingFolderId,
 }: {
-  sandboxData: Sandbox;
+  sandboxData: Sandbox
-  files: (TFile | TFolder)[];
+  files: (TFile | TFolder)[]
-  selectFile: (tab: TTab) => void;
+  selectFile: (tab: TTab) => void
   handleRename: (
     id: string,
     newName: string,
     oldName: string,
     type: "file" | "folder"
-  ) => boolean;
+  ) => boolean
-  handleDeleteFile: (file: TFile) => void;
+  handleDeleteFile: (file: TFile) => void
-  handleDeleteFolder: (folder: TFolder) => void;
+  handleDeleteFolder: (folder: TFolder) => void
-  socket: Socket;
+  socket: Socket
-  setFiles: (files: (TFile | TFolder)[]) => void;
+  setFiles: (files: (TFile | TFolder)[]) => void
-  addNew: (name: string, type: "file" | "folder") => void;
+  addNew: (name: string, type: "file" | "folder") => void
-  deletingFolderId: string;
+  deletingFolderId: string
 }) {
-  const ref = useRef(null); // drop target
+  const ref = useRef(null) // drop target
-
-  const [creatingNew, setCreatingNew] = useState<"file" | "folder" | null>(
-    null
-  );
-  const [movingId, setMovingId] = useState("");
 
+  const [creatingNew, setCreatingNew] = useState<"file" | "folder" | null>(null)
+  const [movingId, setMovingId] = useState("")
+  console.log(files)
   useEffect(() => {
-    const el = ref.current;
+    const el = ref.current
 
     if (el) {
       return dropTargetForElements({
         element: el,
         getData: () => ({ id: `projects/${sandboxData.id}` }),
         canDrop: ({ source }) => {
-          const file = files.find((child) => child.id === source.data.id);
+          const file = files.find((child) => child.id === source.data.id)
-          return !file;
+          return !file
         },
-      });
+      })
     }
-  }, [files]);
+  }, [files])
 
   useEffect(() => {
     return monitorForElements({
       onDrop({ source, location }) {
-        const destination = location.current.dropTargets[0];
+        const destination = location.current.dropTargets[0]
         if (!destination) {
-          return;
+          return
         }
 
-        const fileId = source.data.id as string;
+        const fileId = source.data.id as string
-        const folderId = destination.data.id as string;
+        const folderId = destination.data.id as string
 
-        const fileFolder = fileId.split("/").slice(0, -1).join("/");
+        const fileFolder = fileId.split("/").slice(0, -1).join("/")
         if (fileFolder === folderId) {
-          return;
+          return
         }
 
-        console.log("move file", fileId, "to folder", folderId);
+        console.log("move file", fileId, "to folder", folderId)
 
-        setMovingId(fileId);
+        setMovingId(fileId)
         socket.emit(
           "moveFile",
           fileId,
           folderId,
           (response: (TFolder | TFile)[]) => {
-            setFiles(response);
+            setFiles(response)
-            setMovingId("");
+            setMovingId("")
           }
-        );
+        )
       },
-    });
+    })
-  }, []);
+  }, [])
 
   return (
     <div className="h-full w-56 select-none flex flex-col text-sm items-start justify-between p-2">
@@ -138,8 +137,10 @@ export default function Sidebar({
           } rounded-sm w-full mt-1 flex flex-col`}
         > */}
           {files.length === 0 ? (
-            <div className="w-full flex justify-center">
+            <div className="w-full flex flex-col justify-center">
-              <Loader2 className="w-4 h-4 animate-spin" />
+              {new Array(6).fill(0).map((_, i) => (
+                <Skeleton key={i} className="h-[1.625rem] mb-0.5 rounded-sm" />
+              ))}
             </div>
           ) : (
             <>
@@ -172,7 +173,7 @@ export default function Sidebar({
                   socket={socket}
                   type={creatingNew}
                   stopEditing={() => {
-                    setCreatingNew(null);
+                    setCreatingNew(null)
                   }}
                   addNew={addNew}
                 />
@@ -187,5 +188,5 @@ export default function Sidebar({
         </Button> */}
       </div>
     </div>
-  );
+  )
 }