1- import { FC , useMemo } from 'react' ;
1+ import { FC , Suspense , useMemo } from 'react' ;
22import { Routes , Route , useLocation } from 'react-router-dom' ;
33import { Header , Container } from '@backstage/ui' ;
44import {
@@ -12,7 +12,6 @@ import {
1212 useFilteredProtectedRoutes ,
1313 usePermissionProvider ,
1414 GradientCircularProgress ,
15- FavoritesProvider ,
1615} from '@electrolux-oss/infrakitchen' ;
1716
1817import { useApi , useRouteRef } from '@backstage/frontend-plugin-api' ;
@@ -22,33 +21,43 @@ import { InfraKitchenColorOverrideProvider } from './InfraKitchenColorOverridePr
2221
2322const PermissionFilteredRouter = ( ) => {
2423 const accessibleRoutes = useFilteredProtectedRoutes ( ) ;
25- const { permissions } = usePermissionProvider ( ) ;
26-
27- // If no permissions are defined yet, don't render any routes
28- if ( Object . keys ( permissions ) . length === 0 ) {
29- return null ;
30- }
3124
3225 return (
3326 < >
3427 < RouterSnackbarWrapper />
35- < Routes >
36- { accessibleRoutes . map ( ( route , index ) => (
37- < Route
38- key = { route . path || index }
39- path = { route . path }
40- element = { route . Component ? < route . Component /> : route . element }
41- />
42- ) ) }
43- </ Routes >
28+ < Suspense fallback = { < GradientCircularProgress /> } >
29+ < Routes >
30+ { accessibleRoutes . map ( ( route , index ) => {
31+ const element = route . Component ? (
32+ < route . Component />
33+ ) : (
34+ route . element
35+ ) ;
36+
37+ if ( route . path === '/' ) {
38+ return (
39+ < Route key = { route . path || index } index element = { element } />
40+ ) ;
41+ }
42+
43+ return (
44+ < Route
45+ key = { route . path || index }
46+ path = { route . path ?. replace ( / ^ \/ / , '' ) }
47+ element = { element }
48+ />
49+ ) ;
50+ } ) }
51+ </ Routes >
52+ </ Suspense >
4453 </ >
4554 ) ;
4655} ;
4756
4857const allTabs = [
4958 {
50- id : 'getting-started ' ,
51- label : 'Getting Started ' ,
59+ id : 'dashboard ' ,
60+ label : 'Dashboard ' ,
5261 path : '/' ,
5362 permissionKey : '' ,
5463 } ,
@@ -118,7 +127,7 @@ const allTabs = [
118127
119128const InfrakitchenApp : FC = ( ) => {
120129 const location = useLocation ( ) ;
121- const { permissions, loading } = usePermissionProvider ( ) ;
130+ const { permissions } = usePermissionProvider ( ) ;
122131
123132 // Filter tabs based on user permissions
124133 const tabs = useMemo ( ( ) => {
@@ -159,10 +168,6 @@ const InfrakitchenApp: FC = () => {
159168 [ tabs , basePath ] ,
160169 ) ;
161170
162- if ( loading ) {
163- return < GradientCircularProgress /> ;
164- }
165-
166171 return (
167172 < >
168173 < Header
@@ -190,13 +195,11 @@ export const AppWrapper = () => {
190195 webSocketEnabled = { false }
191196 >
192197 < PermissionProvider >
193- < FavoritesProvider >
194- < EventProvider >
195- < NotificationProvider >
196- < InfrakitchenApp />
197- </ NotificationProvider >
198- </ EventProvider >
199- </ FavoritesProvider >
198+ < EventProvider >
199+ < NotificationProvider >
200+ < InfrakitchenApp />
201+ </ NotificationProvider >
202+ </ EventProvider >
200203 </ PermissionProvider >
201204 </ ConfigProvider >
202205 </ LocalStorageProvider >
0 commit comments