From f6a07515caed584c29a22f89ced72315f113b421 Mon Sep 17 00:00:00 2001
From: Bram Borggreve <beeman@beeman.nl>
Date: Mon, 19 Feb 2024 03:41:57 +0000
Subject: [PATCH] feat: add suspense to grid and rab routes

---
 apps/web/project.json                         |  3 ++-
 .../src/lib/ui-grid-routes/ui-grid-routes.tsx |  5 +++--
 .../src/lib/ui-tab-routes/ui-tab-routes.tsx   | 19 +++++++++++--------
 ..._prefixFileName__-grid-routes.tsx.template |  5 +++--
 ...__prefixFileName__-tab-routes.tsx.template | 19 +++++++++++--------
 5 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/apps/web/project.json b/apps/web/project.json
index f0b465d..5dee3ae 100644
--- a/apps/web/project.json
+++ b/apps/web/project.json
@@ -54,7 +54,8 @@
       },
       "configurations": {
         "development": {
-          "buildTarget": "web:build:development"
+          "buildTarget": "web:build:development",
+          "port": 4321
         },
         "production": {
           "buildTarget": "web:build:production",
diff --git a/packages/core/src/lib/ui-grid-routes/ui-grid-routes.tsx b/packages/core/src/lib/ui-grid-routes/ui-grid-routes.tsx
index e3204d5..e4e1075 100644
--- a/packages/core/src/lib/ui-grid-routes/ui-grid-routes.tsx
+++ b/packages/core/src/lib/ui-grid-routes/ui-grid-routes.tsx
@@ -1,7 +1,8 @@
 import { Grid, GridColProps, GridProps, NavLink, NavLinkProps } from '@mantine/core'
-import { ReactNode, useMemo } from 'react'
+import { ReactNode, Suspense, useMemo } from 'react'
 import { Link, Navigate, useLocation, useRoutes } from 'react-router-dom'
 import { UiNotFound } from '../ui-not-found'
+import { UiLoader } from '../ui-loader'
 
 export interface UiGridRoute extends NavLinkProps {
   path: string
@@ -43,7 +44,7 @@ export function UiGridRoutes({ basePath, routes, leftColProps, rightColProps, ..
         {links}
       </Grid.Col>
       <Grid.Col span={{ base: 12, sm: 10 }} {...leftColProps}>
-        {router}
+        <Suspense fallback={<UiLoader />}>{router}</Suspense>
       </Grid.Col>
     </Grid>
   )
diff --git a/packages/core/src/lib/ui-tab-routes/ui-tab-routes.tsx b/packages/core/src/lib/ui-tab-routes/ui-tab-routes.tsx
index 0566bff..2a0aea4 100644
--- a/packages/core/src/lib/ui-tab-routes/ui-tab-routes.tsx
+++ b/packages/core/src/lib/ui-tab-routes/ui-tab-routes.tsx
@@ -1,6 +1,7 @@
 import { Box, Tabs, TabsProps, Text } from '@mantine/core'
-import { ReactElement, ReactNode } from 'react'
+import { ReactElement, ReactNode, Suspense } from 'react'
 import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom'
+import { UiLoader } from '../ui-loader'
 
 export interface UiTabRoute {
   element: ReactNode
@@ -42,13 +43,15 @@ export function UiTabRoutes({
           ))}
         </Tabs.List>
       </Tabs>
-      <Routes>
-        {redirect ? <Route index element={<Navigate replace to={`./${redirect}`} />} /> : null}
-        {tabs.map((tab) => (
-          <Route key={tab.path} path={`${tab.path}/*`} element={tab.element} />
-        ))}
-        <Route path="*" element={<Navigate replace to={`./${redirect}`} />} />
-      </Routes>
+      <Suspense fallback={<UiLoader />}>
+        <Routes>
+          {redirect ? <Route index element={<Navigate replace to={`./${redirect}`} />} /> : null}
+          {tabs.map((tab) => (
+            <Route key={tab.path} path={`${tab.path}/*`} element={tab.element} />
+          ))}
+          <Route path="*" element={<Navigate replace to={`./${redirect}`} />} />
+        </Routes>
+      </Suspense>
     </Box>
   )
 }
diff --git a/packages/generators/src/generators/component/files/grid-routes/__prefixFileName__-grid-routes.tsx.template b/packages/generators/src/generators/component/files/grid-routes/__prefixFileName__-grid-routes.tsx.template
index f6cadc9..2d75bae 100644
--- a/packages/generators/src/generators/component/files/grid-routes/__prefixFileName__-grid-routes.tsx.template
+++ b/packages/generators/src/generators/component/files/grid-routes/__prefixFileName__-grid-routes.tsx.template
@@ -1,7 +1,8 @@
 import { Grid, GridColProps, GridProps, NavLink, NavLinkProps } from '@mantine/core'
-import { ReactNode, useMemo } from 'react'
+import { ReactNode, Suspense, useMemo } from 'react'
 import { Link, Navigate, useLocation, useRoutes } from 'react-router-dom'
 import { <%= prefix.className %>NotFound } from '../<%= prefix.fileName %>-not-found'
+import { <%= prefix.className %>Loader } from '../<%= prefix.fileName %>-loader'
 
 export interface <%= prefix.className %>GridRoute extends NavLinkProps {
   path: string
@@ -43,7 +44,7 @@ export function <%= prefix.className %>GridRoutes({ basePath, routes, leftColPro
         {links}
       </Grid.Col>
       <Grid.Col span={{ base: 12, sm: 10 }} {...leftColProps}>
-        {router}
+        <Suspense fallback={<UiLoader />}>{router}</Suspense>
       </Grid.Col>
     </Grid>
   )
diff --git a/packages/generators/src/generators/component/files/tab-routes/__prefixFileName__-tab-routes.tsx.template b/packages/generators/src/generators/component/files/tab-routes/__prefixFileName__-tab-routes.tsx.template
index 9e3cc3c..e242a1c 100644
--- a/packages/generators/src/generators/component/files/tab-routes/__prefixFileName__-tab-routes.tsx.template
+++ b/packages/generators/src/generators/component/files/tab-routes/__prefixFileName__-tab-routes.tsx.template
@@ -1,6 +1,7 @@
 import { Box, Tabs, TabsProps, Text } from '@mantine/core'
-import { ReactElement, ReactNode } from 'react'
+import { ReactElement, ReactNode, Suspense } from 'react'
 import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom'
+import { <%= prefix.className %>Loader } from '../<%= prefix.fileName %>-loader'
 
 export interface <%= prefix.className %>TabRoute {
   element: ReactNode
@@ -42,13 +43,15 @@ export function <%= prefix.className %>TabRoutes({
           ))}
         </Tabs.List>
       </Tabs>
-      <Routes>
-        {redirect ? <Route index element={<Navigate replace to={`./${redirect}`} />} /> : null}
-        {tabs.map((tab) => (
-          <Route key={tab.path} path={`${tab.path}/*`} element={tab.element} />
-        ))}
-        <Route path="*" element={<Navigate replace to={`./${redirect}`} />} />
-      </Routes>
+      <Suspense fallback={<<%= prefix.className %>Loader />}>
+        <Routes>
+          {redirect ? <Route index element={<Navigate replace to={`./${redirect}`} />} /> : null}
+          {tabs.map((tab) => (
+            <Route key={tab.path} path={`${tab.path}/*`} element={tab.element} />
+          ))}
+          <Route path="*" element={<Navigate replace to={`./${redirect}`} />} />
+        </Routes>
+      </Suspense>
     </Box>
   )
 }