feat: display offline indicators in all views

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>;
 }