From 72c3fe586a121488a62f95c52c67cc713a995922 Mon Sep 17 00:00:00 2001
From: Jonathan <contact@grafikart.fr>
Date: Thu, 22 May 2025 15:41:19 +0200
Subject: [PATCH] Add skeletons for routes

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
---
 .../risks/skeletons/RisksPage.tsx             | 22 +++++++++++++++++++
 apps/console2/src/routes.tsx                  |  8 ++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 apps/console2/src/pages/organizations/risks/skeletons/RisksPage.tsx

diff --git a/apps/console2/src/pages/organizations/risks/skeletons/RisksPage.tsx b/apps/console2/src/pages/organizations/risks/skeletons/RisksPage.tsx
new file mode 100644
index 000000000..4f51f2e6a
--- /dev/null
+++ b/apps/console2/src/pages/organizations/risks/skeletons/RisksPage.tsx
@@ -0,0 +1,22 @@
+import { Button, IconPlusLarge, PageHeader, Skeleton } from "@probo/ui";
+import { useTranslate } from "@probo/i18n";
+
+export function RisksPageSkeleton() {
+  const { __ } = useTranslate();
+  return (
+    <div className="space-y-6">
+      <PageHeader title={__("Risks")}>
+        <Button icon={IconPlusLarge} disabled>
+          {__("New Risk")}
+        </Button>
+      </PageHeader>
+      <div className="grid grid-cols-2 gap-4">
+        <Skeleton className="aspect-square" />
+        <Skeleton className="aspect-square" />
+      </div>
+      <div>
+        <Skeleton style={{ aspectRatio: "1280/280" }} />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/console2/src/routes.tsx b/apps/console2/src/routes.tsx
index 7c87c2639..4386b94df 100644
--- a/apps/console2/src/routes.tsx
+++ b/apps/console2/src/routes.tsx
@@ -7,6 +7,7 @@ import { MainLayout } from "./layouts/MainLayout";
 import { AuthLayout, CenteredLayout, CenteredLayoutSkeleton } from "@probo/ui";
 import { lazy, Suspense, type FC } from "react";
 import { UnAuthenticatedError } from "./providers/RelayProviders";
+import { RisksPageSkeleton } from "./pages/organizations/risks/skeletons/RisksPage";
 
 function ErrorBoundary() {
   const error = useRouteError();
@@ -60,6 +61,7 @@ const routes = [
     children: [
       {
         path: "risks",
+        fallback: RisksPageSkeleton,
         Component: lazy(() => import("./pages/organizations/risks/RisksPage")),
       },
     ],
@@ -72,6 +74,7 @@ const routes = [
 function routeTransformer(route: Route): RouteObject {
   if ("fallback" in route && route.fallback) {
     const fallback = <route.fallback />;
+    console.log(fallback, route.path);
     return {
       ...route,
       children: route.children?.map(routeTransformer),
@@ -82,7 +85,10 @@ function routeTransformer(route: Route): RouteObject {
       ),
     } as RouteObject;
   }
-  return route as RouteObject;
+  return {
+    ...route,
+    children: route.children?.map(routeTransformer),
+  };
 }
 
 export const router = createBrowserRouter(routes.map(routeTransformer));