From 42d88ce8d64e9f85469f2da3deb4fff3ae85fee3 Mon Sep 17 00:00:00 2001 From: Madhura68 Date: Sun, 19 Apr 2026 10:22:03 +0200 Subject: [PATCH] Add route loading and error states --- app/check-in/error.tsx | 27 ++++++++++++ app/check-in/loading.tsx | 65 ++++++++++++++++++++++++++++ app/dashboard/error.tsx | 27 ++++++++++++ app/dashboard/loading.tsx | 41 ++++++++++++++++++ app/planning/error.tsx | 27 ++++++++++++ app/planning/loading.tsx | 87 ++++++++++++++++++++++++++++++++++++++ components/ui/skeleton.tsx | 10 +++++ 7 files changed, 284 insertions(+) create mode 100644 app/check-in/error.tsx create mode 100644 app/check-in/loading.tsx create mode 100644 app/dashboard/error.tsx create mode 100644 app/dashboard/loading.tsx create mode 100644 app/planning/error.tsx create mode 100644 app/planning/loading.tsx create mode 100644 components/ui/skeleton.tsx diff --git a/app/check-in/error.tsx b/app/check-in/error.tsx new file mode 100644 index 0000000..ec5ded7 --- /dev/null +++ b/app/check-in/error.tsx @@ -0,0 +1,27 @@ +"use client"; +import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert"; +import { Button } from "@/components/ui/button"; + +export default function CheckInError({ + reset, +}: { + error: Error & { digest?: string }; + reset: () => void; +}) { + return ( +
+
+ + Er is iets misgegaan + + De check-in pagina kon niet worden geladen. Probeer het opnieuw of + kom later terug. + + + +
+
+ ); +} diff --git a/app/check-in/loading.tsx b/app/check-in/loading.tsx new file mode 100644 index 0000000..7057309 --- /dev/null +++ b/app/check-in/loading.tsx @@ -0,0 +1,65 @@ +import { Skeleton } from "@/components/ui/skeleton"; +import { Card, CardContent, CardHeader } from "@/components/ui/card"; + +export default function CheckInLoading() { + return ( +
+
+
+ +
+ + +
+
+ +
+
+ + + +
+ +
+ + + + + +
+ {[0, 1, 2].map((i) => ( + + ))} +
+ + + + +
+ + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ ); +} diff --git a/app/dashboard/error.tsx b/app/dashboard/error.tsx new file mode 100644 index 0000000..d696d6f --- /dev/null +++ b/app/dashboard/error.tsx @@ -0,0 +1,27 @@ +"use client"; +import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert"; +import { Button } from "@/components/ui/button"; + +export default function DashboardError({ + reset, +}: { + error: Error & { digest?: string }; + reset: () => void; +}) { + return ( +
+
+ + Er is iets misgegaan + + Het dashboard kon niet worden geladen. Probeer het opnieuw of kom + later terug. + + + +
+
+ ); +} diff --git a/app/dashboard/loading.tsx b/app/dashboard/loading.tsx new file mode 100644 index 0000000..6393480 --- /dev/null +++ b/app/dashboard/loading.tsx @@ -0,0 +1,41 @@ +import { Skeleton } from "@/components/ui/skeleton"; +import { Card, CardContent, CardHeader } from "@/components/ui/card"; + +export default function DashboardLoading() { + return ( +
+
+
+ +
+ + +
+
+ +
+
+ + + +
+ +
+ {Array.from({ length: 6 }).map((_, i) => ( + + + + + + + + + + + ))} +
+
+
+
+ ); +} diff --git a/app/planning/error.tsx b/app/planning/error.tsx new file mode 100644 index 0000000..eaa7826 --- /dev/null +++ b/app/planning/error.tsx @@ -0,0 +1,27 @@ +"use client"; +import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert"; +import { Button } from "@/components/ui/button"; + +export default function PlanningError({ + reset, +}: { + error: Error & { digest?: string }; + reset: () => void; +}) { + return ( +
+
+ + Er is iets misgegaan + + De planningpagina kon niet worden geladen. Probeer het opnieuw of + kom later terug. + + + +
+
+ ); +} diff --git a/app/planning/loading.tsx b/app/planning/loading.tsx new file mode 100644 index 0000000..73d65b2 --- /dev/null +++ b/app/planning/loading.tsx @@ -0,0 +1,87 @@ +import { Skeleton } from "@/components/ui/skeleton"; +import { Card, CardContent, CardHeader } from "@/components/ui/card"; + +export default function PlanningLoading() { + return ( +
+
+
+ +
+ + +
+
+ +
+
+ + + +
+ +
+ + + + +
+ + +
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ + {[0, 1, 2].map((i) => ( + + +
+ + +
+ + + + ))} +
+
+
+
+ ); +} diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx new file mode 100644 index 0000000..b059586 --- /dev/null +++ b/components/ui/skeleton.tsx @@ -0,0 +1,10 @@ +import { cn } from "@/lib/utils"; + +export function Skeleton({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ); +}