Added Loading Skeleton for the dashboard

app/dashboard/loading.tsx

@@ -1,3 +0,0 @@
-export default function Loading() {
-  return null
-}

app/dashboard/page.tsx

@@ -6,6 +6,8 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
+import { Skeleton } from "@/components/ui/skeleton"
+import { MessageSquare } from "lucide-react"
 import {
   Folder,
   Search,
@@ -35,8 +37,61 @@ const formatBytes = (bytes: number, decimals = 2) => {
 
 type FolderType = 'contrat' | 'projet' | 'rapport' | 'finance' | 'rh' | 'marketing' | 'autre';
 
+function DashboardLoadingSkeleton() {
+  return (
+    <div className="flex h-full text-gray-100 p-6 space-x-6">
+      {/* Colonne 1: Squelette Liste */}
+      <div className="w-80 flex-shrink-0 flex flex-col h-full">
+        <div className="flex-shrink-0">
+          <div className="flex items-center justify-between mb-4">
+            <Skeleton className="h-7 w-32 bg-gray-700" />
+            <Skeleton className="h-8 w-8 bg-gray-700" />
+          </div>
+          <div className="relative mb-4">
+            <Skeleton className="h-10 w-full bg-gray-700" />
+          </div>
+        </div>
+        <div className="flex-1 overflow-y-auto -mr-3 pr-3">
+          <div className="space-y-2">
+            {[...Array(8)].map((_, i) => (
+              <Card key={i} className="bg-gray-800 border-gray-700">
+                <CardContent className="p-3">
+                  <div className="flex items-center space-x-3 animate-pulse">
+                    <Skeleton className="h-5 w-5 bg-gray-700" />
+                    <div className="min-w-0">
+                      <Skeleton className="h-4 w-32 bg-gray-700" />
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Colonne 2: Squelette Résumé */}
+      <div className="w-[600px] flex-shrink-0 flex flex-col h-full overflow-y-auto">
+        <div className="flex h-full items-center justify-center">
+          <p className="text-gray-500 animate-pulse">Chargement des données...</p>
+        </div>
+      </div>
+
+      {/* Colonne 3: Squelette Chat */}
+      <div className="flex-1 bg-gray-800 border border-gray-700 rounded-lg flex flex-col overflow-hidden h-full">
+        <div className="flex h-full items-center justify-center text-gray-500 p-6">
+          <div className="text-center animate-pulse">
+            <MessageSquare className="h-12 w-12 mx-auto mb-4" />
+            <h3 className="text-lg font-medium text-gray-100 mb-2">
+              Chargement du chat...
+            </h3>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 export default function DashboardPage() {
-  const router = useRouter()
   const [searchTerm, setSearchTerm] = useState("")
   const [folderType, setFolderType] = useState<FolderType | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -111,6 +166,10 @@ export default function DashboardPage() {
     [isConnected, userPairingId, setFolderProcesses, setMyFolderProcesses, setFolderPrivateData]
   );
 
+  if (loadingFolders) {
+    return <DashboardLoadingSkeleton />;
+  }
+
   return (
     <div className="flex h-full text-gray-100 p-6 space-x-6">
 
@@ -153,8 +212,8 @@ export default function DashboardPage() {
                 <Card
                   key={folder.folderNumber}
                   className={`transition-shadow bg-gray-800 border border-gray-700 cursor-pointer ${selectedFolder?.folderNumber === folder.folderNumber
-                      ? 'border-blue-500' // Dossier sélectionné
+                    ? 'border-blue-500' // Dossier sélectionné
-                      : 'hover:border-gray-600'
+                    : 'hover:border-gray-600'
                     }`}
                   onClick={() => setSelectedFolder(folder)}
                 >
@@ -265,8 +324,8 @@ export default function DashboardPage() {
       {notification && (
         <div className="fixed top-4 right-4 z-50">
           <div className={`p-4 rounded-md shadow-lg ${notification.type === "success" ? "bg-green-50 text-green-800 border border-green-200" :
-              notification.type === "error" ? "bg-red-50 text-red-800 border border-red-200" :
+            notification.type === "error" ? "bg-red-50 text-red-800 border border-red-200" :
-                "bg-blue-50 text-blue-800 border border-blue-200"
+              "bg-blue-50 text-blue-800 border border-blue-200"
             }`}>
             <div className="flex items-center justify-between">
               <span>{notification.message}</span>