feat: automatic refetch css override (#1588)

* feat: send refect on css change

* feat: revamp ViewLoader

---------

Co-authored-by: alex-Arc <omnivox@LAPTOP-RC5SNBVV.localdomain>

apps/client/src/views/ViewLoader.tsx

@@ -1,35 +1,39 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, Suspense } from 'react';
 
-import { overrideStylesURL } from '../common/api/constants';
+import useCssOverride from '../common/hooks-query/useCssOverride';
 import useViewSettings from '../common/hooks-query/useViewSettings';
-import { useRuntimeStylesheet } from '../common/hooks/useRuntimeStylesheet';
 import Loader from './common/loader/Loader';
 
-export default function ViewLoader({ children }: PropsWithChildren) {
-  const { data } = useViewSettings();
-  const { shouldRender } = useRuntimeStylesheet(data.overrideStyles ? overrideStylesURL : undefined);
+const scriptTagId = 'ontime-stylesheet-override';
 
+function OverrideStyles() {
+  'use memo';
+  const { data: settings } = useViewSettings();
+  const { overrideStyles } = settings;
+  const { data: css } = useCssOverride(overrideStyles);
+  const cssBlob = URL.createObjectURL(new Blob([css], { type: 'text/css' }));
+
+  //@ts-expect-error disabled exists on link when rel='stylesheet' https://react.dev/reference/react-dom/components/link#props
+  return <link id={scriptTagId} rel='stylesheet' href={cssBlob} precedence='high' disabled={!overrideStyles} />;
+}
+
+export default function ViewLoader({ children }: PropsWithChildren) {
+  'use memo';
   // we need to be able to override the background colour with the key param
   const searchParams = new URLSearchParams(window.location.search);
   const colourFromParams = searchParams.get('keyColour') ?? '#101010';
 
-  // eventually we would want to leverage suspense here
-  // while the feature is not ready, we simply trigger a loader
-  // suspense would have the advantage of being triggered also by react-query
-
-  if (!shouldRender) {
-    return (
-      <>
-        <style>{`body { background: var(--background-color-override, ${colourFromParams}); }`}</style>
-        <Loader />
-      </>
-    );
-  }
-
   return (
-    <>
-      <style>{`body { background: var(--background-color-override, ${colourFromParams}); }`}</style>
+    <Suspense
+      fallback={
+        <>
+          <style>{`body { background: var(--background-color-override, ${colourFromParams}); }`}</style>
+          <Loader />
+        </>
+      }
+    >
+      <OverrideStyles />
       {children}
-    </>
+    </Suspense>
   );
 }