4nk/docv
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Loading Skeleton for the dashboard

Browse Source
This commit is contained in:
Sadrinho27 2025-11-06 11:59:21 +01:00
parent 04773bb28a
commit 3893d73e5a
2 changed files with 64 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/dashboard/loading.tsx
View File

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

69
app/dashboard/page.tsx
View File

@ -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é
: 'hover:border-gray-600'
? 'border-blue-500' // Dossier sélectionné
: '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" :
"bg-blue-50 text-blue-800 border border-blue-200"
notification.type === "error" ? "bg-red-50 text-red-800 border border-red-200" :
"bg-blue-50 text-blue-800 border border-blue-200"
}`}>
<div className="flex items-center justify-between">
<span>{notification.message}</span>