feat: display offline indicators in all views

apps/client/src/AppRouter.tsx

@@ -5,7 +5,9 @@ import { OntimeView, OntimeViewPresettable, URLPreset } from 'ontime-types';
 import ViewNavigationMenu from './common/components/navigation-menu/ViewNavigationMenu';
 import { PresetContext } from './common/context/PresetContext';
 import { useClientPath } from './common/hooks/useClientPath';
+import { useIsOnline } from './common/hooks/useSocket';
 import useUrlPresets from './common/hooks-query/useUrlPresets';
+import { cx } from './common/utils/styleUtils';
 import { getRouteFromPreset } from './common/utils/urlPresets';
 import Log from './features/log/Log';
 import Loader from './views/common/loader/Loader';
@@ -14,6 +16,8 @@ import ViewLoader from './views/ViewLoader';
 import { getIsNavigationLocked, sessionScope } from './externals';
 import { initializeSentry } from './sentry.config';
 
+import style from './views/ViewLoader.module.scss';
+
 const Timer = lazy(() => import('./views/timer/Timer'));
 const Countdown = lazy(() => import('./views/countdown/Countdown'));
 const Backstage = lazy(() => import('./views/backstage/Backstage'));
@@ -175,6 +179,7 @@ const PresetViewMap: Record<OntimeViewPresettable, ComponentType> = {
 function PresetView() {
   const { data, status } = useUrlPresets();
   const { alias } = useParams();
+  const { isOnline } = useIsOnline();
 
   const preset: URLPreset | undefined = useMemo(() => {
     if (status === 'pending' || !alias) return;
@@ -198,10 +203,10 @@ function PresetView() {
    */
   if (!preset) {
     return (
-      <>
+      <div className={cx([style.viewLoader, !isOnline && style.isOffline])}>
         <ViewNavigationMenu isNavigationLocked={!showNav} suppressSettings />
         <NotFound />
-      </>
+      </div>
     );
   }
 
@@ -214,8 +219,10 @@ function PresetView() {
   const Component = PresetViewMap[preset.target as OntimeViewPresettable];
   return (
     <PresetContext value={preset}>
-      <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} suppressSettings />
-      {Component ? <Component /> : <NotFound />}
+      <div className={cx([style.viewLoader, !isOnline && style.isOffline])}>
+        <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} suppressSettings />
+        {Component ? <Component /> : <NotFound />}
+      </div>
     </PresetContext>
   );
 }