diff --git a/packages/console/src/containers/ConsoleContent/index.tsx b/packages/console/src/containers/ConsoleContent/index.tsx index d063da006..78fb114a7 100644 --- a/packages/console/src/containers/ConsoleContent/index.tsx +++ b/packages/console/src/containers/ConsoleContent/index.tsx @@ -1,4 +1,4 @@ -import { Suspense } from 'react'; +import { Suspense, useEffect, useState } from 'react'; import { useOutletContext, useRoutes } from 'react-router-dom'; import { safeLazy } from 'react-safe-lazy'; @@ -15,8 +15,29 @@ import { Skeleton } from './Sidebar'; import useTenantScopeListener from './hooks'; import styles from './index.module.scss'; +const suspenseDisplayTimeout = 500; // Milliseconds const Sidebar = safeLazy(async () => import('./Sidebar')); +function SuspenseFallback() { + const [showSpinner, setShowSpinner] = useState(false); + + useEffect(() => { + const timeout = window.setTimeout(() => { + setShowSpinner(true); + }, suspenseDisplayTimeout); + + return () => { + clearTimeout(timeout); + }; + }, []); + + if (showSpinner) { + return ; + } + + return null; +} + function ConsoleContent() { const { scrollableContent } = useOutletContext(); const routeObjects = useConsoleRoutes(); @@ -33,7 +54,7 @@ function ConsoleContent() { - }>{routes} + }>{routes} {isDevFeaturesEnabled && (