feat: add suspense to grid and rab routes

pubkeyapp · Feb 19, 2024 · f6a0751 · f6a0751
1 parent 6339ff4
commit f6a0751
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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/...rs/src/generators/component/files/grid-routes/__prefixFileName__-grid-routes.tsx.template b/...rs/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/...tors/src/generators/component/files/tab-routes/__prefixFileName__-tab-routes.tsx.template b/...tors/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>
   )
 }