feat: display offline indicators in all views

apps/client/src/views/ViewLoader.module.scss

@@ -0,0 +1,27 @@
+@use '../theme/ontimeStyles' as *;
+@use '../theme/ontimeColours' as *;
+
+.viewLoader {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.isOffline {
+  &::after {
+    content: 'Disconnected';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding-block: 0.25rem;
+    background-color: $red-700;
+    color: $ui-white;
+    text-align: center;
+    font-size: $aux-text-size;
+    font-weight: 600;
+    z-index: $zindex-sudo;
+    pointer-events: none;
+    font-family: $ontime-font-family;
+  }
+}

apps/client/src/views/ViewLoader.tsx

@@ -2,13 +2,18 @@ import { PropsWithChildren } from 'react';
 
 import { overrideStylesURL } from '../common/api/constants';
 import { useRuntimeStylesheet } from '../common/hooks/useRuntimeStylesheet';
+import { useIsOnline } from '../common/hooks/useSocket';
 import useViewSettings from '../common/hooks-query/useViewSettings';
+import { cx } from '../common/utils/styleUtils';
 
 import Loader from './common/loader/Loader';
 
+import style from './ViewLoader.module.scss';
+
 export default function ViewLoader({ children }: PropsWithChildren) {
   const { data } = useViewSettings();
   const { shouldRender } = useRuntimeStylesheet(data.overrideStyles ? overrideStylesURL : undefined);
+  const { isOnline } = useIsOnline();
 
   // eventually we would want to leverage suspense here
   // while the feature is not ready, we simply trigger a loader
@@ -18,6 +23,5 @@ export default function ViewLoader({ children }: PropsWithChildren) {
     return <Loader />;
   }
 
-  // eslint-disable-next-line react/jsx-no-useless-fragment -- ensuring JSX return
-  return <>{children}</>;
+  return <div className={cx([style.viewLoader, !isOnline && style.isOffline])}>{children}</div>;
 }