feat: add loader to views

apps/client/src/features/viewers/ViewWrapper.tsx

@@ -86,10 +86,10 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
       timerType: eventNow?.timerType ?? null,
     };
 
-    // prevent render until we get all the data we need
-    if (!viewSettings) {
-      return null;
-    }
+    // // prevent render until we get all the data we need
+    // if (!viewSettings) {
+    //   return null;
+    // }
 
     return (
       <>

apps/client/src/features/viewers/backstage/Backstage.tsx

@@ -2,17 +2,15 @@ import { useEffect, useState } from 'react';
 import QRCode from 'react-qr-code';
 import { useSearchParams } from 'react-router-dom';
 import { AnimatePresence, motion } from 'framer-motion';
-import { CustomFields, OntimeEvent, ProjectData, Settings, SupportedEvent, ViewSettings } from 'ontime-types';
+import { CustomFields, OntimeEvent, ProjectData, Settings, SupportedEvent } from 'ontime-types';
 import { millisToString, removeLeadingZero } from 'ontime-utils';
 
-import { overrideStylesURL } from '../../../common/api/constants';
 import ProgressBar from '../../../common/components/progress-bar/ProgressBar';
 import Schedule from '../../../common/components/schedule/Schedule';
 import { ScheduleProvider } from '../../../common/components/schedule/ScheduleContext';
 import ScheduleNav from '../../../common/components/schedule/ScheduleNav';
 import TitleCard from '../../../common/components/title-card/TitleCard';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
-import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
 import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { timerPlaceholderMin } from '../../../common/utils/styleUtils';
@@ -37,25 +35,12 @@ interface BackstageProps {
   backstageEvents: OntimeEvent[];
   selectedId: string | null;
   general: ProjectData;
-  viewSettings: ViewSettings;
   settings: Settings | undefined;
 }
 
 export default function Backstage(props: BackstageProps) {
-  const {
-    customFields,
-    isMirrored,
-    eventNow,
-    eventNext,
-    time,
-    backstageEvents,
-    selectedId,
-    general,
-    viewSettings,
-    settings,
-  } = props;
+  const { customFields, isMirrored, eventNow, eventNext, time, backstageEvents, selectedId, general, settings } = props;
 
-  const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const { getLocalizedString } = useTranslation();
   const [blinkClass, setBlinkClass] = useState(false);
   const [searchParams] = useSearchParams();
@@ -73,11 +58,6 @@ export default function Backstage(props: BackstageProps) {
     return () => clearTimeout(timer);
   }, [selectedId]);
 
-  // defer rendering until we load stylesheets
-  if (!shouldRender) {
-    return null;
-  }
-
   const clock = formatTime(time.clock);
   const startedAt = formatTime(time.startedAt);
   const isNegative = (time.current ?? 0) < 0;

apps/client/src/features/viewers/clock/Clock.tsx

@@ -1,9 +1,7 @@
 import { useSearchParams } from 'react-router-dom';
-import { Settings, ViewSettings } from 'ontime-types';
+import { Settings } from 'ontime-types';
 
-import { overrideStylesURL } from '../../../common/api/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
-import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
 import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { OverridableOptions } from '../../../common/models/View.types';
@@ -17,22 +15,15 @@ import './Clock.scss';
 interface ClockProps {
   isMirrored: boolean;
   time: ViewExtendedTimer;
-  viewSettings: ViewSettings;
   settings: Settings | undefined;
 }
 
 export default function Clock(props: ClockProps) {
-  const { isMirrored, time, viewSettings, settings } = props;
-  const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
+  const { isMirrored, time, settings } = props;
   const [searchParams] = useSearchParams();
 
   useWindowTitle('Clock');
 
-  // defer rendering until we load stylesheets
-  if (!shouldRender) {
-    return null;
-  }
-
   // get config from url: key, text, font, size, hidenav
   // eg. http://localhost:3000/clock?key=f00&text=fff
   // Check for user options

apps/client/src/features/viewers/countdown/Countdown.tsx

@@ -1,19 +1,8 @@
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import {
-  OntimeEvent,
-  OntimeRundownEntry,
-  Playback,
-  Runtime,
-  Settings,
-  SupportedEvent,
-  TimerPhase,
-  ViewSettings,
-} from 'ontime-types';
+import { OntimeEvent, OntimeRundownEntry, Playback, Runtime, Settings, SupportedEvent, TimerPhase } from 'ontime-types';
 
-import { overrideStylesURL } from '../../../common/api/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
-import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
 import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { formatTime, getDefaultFormat } from '../../../common/utils/time';
@@ -34,12 +23,10 @@ interface CountdownProps {
   selectedId: string | null;
   settings: Settings | undefined;
   time: ViewExtendedTimer;
-  viewSettings: ViewSettings;
 }
 
 export default function Countdown(props: CountdownProps) {
-  const { isMirrored, backstageEvents, runtime, selectedId, settings, time, viewSettings } = props;
-  const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
+  const { isMirrored, backstageEvents, runtime, selectedId, settings, time } = props;
   const [searchParams] = useSearchParams();
   const { getLocalizedString } = useTranslation();
 
@@ -80,11 +67,6 @@ export default function Countdown(props: CountdownProps) {
     }
   }, [backstageEvents, searchParams]);
 
-  // defer rendering until we load stylesheets
-  if (!shouldRender) {
-    return null;
-  }
-
   const { message: runningMessage, timer: runningTimer } = fetchTimerData(time, follow, selectedId, runtime.offset);
 
   const standby = time.playback !== Playback.Play && time.playback !== Playback.Roll && selectedId === follow?.id;

apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx

@@ -1,9 +1,7 @@
 import { useSearchParams } from 'react-router-dom';
 import { Playback, TimerPhase, TimerType, ViewSettings } from 'ontime-types';
 
-import { overrideStylesURL } from '../../../common/api/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
-import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
 import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { OverridableOptions } from '../../../common/models/View.types';
@@ -22,17 +20,11 @@ interface MinimalTimerProps {
 
 export default function MinimalTimer(props: MinimalTimerProps) {
   const { isMirrored, time, viewSettings } = props;
-  const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const { getLocalizedString } = useTranslation();
   const [searchParams] = useSearchParams();
 
   useWindowTitle('Minimal Timer');
 
-  // defer rendering until we load stylesheets
-  if (!shouldRender) {
-    return null;
-  }
-
   // TODO: this should be tied to the params
   // USER OPTIONS
   const userOptions: OverridableOptions = {

apps/client/src/features/viewers/public/Public.tsx

@@ -1,15 +1,13 @@
 import QRCode from 'react-qr-code';
 import { useSearchParams } from 'react-router-dom';
 import { AnimatePresence, motion } from 'framer-motion';
-import { CustomFields, OntimeEvent, ProjectData, Settings, ViewSettings } from 'ontime-types';
+import { CustomFields, OntimeEvent, ProjectData, Settings } from 'ontime-types';
 
-import { overrideStylesURL } from '../../../common/api/constants';
 import Schedule from '../../../common/components/schedule/Schedule';
 import { ScheduleProvider } from '../../../common/components/schedule/ScheduleContext';
 import ScheduleNav from '../../../common/components/schedule/ScheduleNav';
 import TitleCard from '../../../common/components/title-card/TitleCard';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
-import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
 import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { formatTime, getDefaultFormat } from '../../../common/utils/time';
@@ -33,7 +31,6 @@ interface BackstageProps {
   events: OntimeEvent[];
   publicSelectedId: string | null;
   general: ProjectData;
-  viewSettings: ViewSettings;
   settings: Settings | undefined;
 }
 
@@ -47,21 +44,14 @@ export default function Public(props: BackstageProps) {
     events,
     publicSelectedId,
     general,
-    viewSettings,
     settings,
   } = props;
 
-  const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const { getLocalizedString } = useTranslation();
   const [searchParams] = useSearchParams();
 
   useWindowTitle('Public Schedule');
 
-  // defer rendering until we load stylesheets
-  if (!shouldRender) {
-    return null;
-  }
-
   const clock = formatTime(time.clock);
   const qrSize = Math.max(window.innerWidth / 15, 128);
 

apps/client/src/features/viewers/studio/StudioClock.tsx

@@ -1,12 +1,10 @@
 import { useSearchParams } from 'react-router-dom';
-import type { MaybeString, OntimeEvent, OntimeRundown, Settings, ViewSettings } from 'ontime-types';
+import type { MaybeString, OntimeEvent, OntimeRundown, Settings } from 'ontime-types';
 import { Playback } from 'ontime-types';
 import { millisToString, removeSeconds, secondsInMillis } from 'ontime-utils';
 
-import { overrideStylesURL } from '../../../common/api/constants';
 import { FitText } from '../../../common/components/fit-text/FitText';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
-import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
 import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { formatTime, getDefaultFormat } from '../../../common/utils/time';
@@ -25,24 +23,16 @@ interface StudioClockProps {
   selectedId: MaybeString;
   nextId: MaybeString;
   onAir: boolean;
-  viewSettings: ViewSettings;
   settings: Settings | undefined;
 }
 
 export default function StudioClock(props: StudioClockProps) {
-  const { isMirrored, eventNext, time, backstageEvents, selectedId, nextId, onAir, viewSettings, settings } = props;
-
-  const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
+  const { isMirrored, eventNext, time, backstageEvents, selectedId, nextId, onAir, settings } = props;
 
   const [searchParams] = useSearchParams();
 
   useWindowTitle('Studio Clock');
 
-  // defer rendering until we load stylesheets
-  if (!shouldRender) {
-    return null;
-  }
-
   const activeIndicators = [...Array(12).keys()];
   const secondsIndicators = [...Array(60).keys()];
 

apps/client/src/features/viewers/timeline/TimelinePage.tsx

@@ -1,9 +1,7 @@
 import { useMemo } from 'react';
-import { MaybeString, OntimeEvent, ProjectData, Runtime, Settings, ViewSettings } from 'ontime-types';
+import { MaybeString, OntimeEvent, ProjectData, Runtime, Settings } from 'ontime-types';
 
-import { overrideStylesURL } from '../../../common/api/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
-import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
 import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { formatDuration, formatTime, getDefaultFormat } from '../../../common/utils/time';
@@ -24,7 +22,6 @@ interface TimelinePageProps {
   selectedId: MaybeString;
   settings: Settings | undefined;
   time: ViewExtendedTimer;
-  viewSettings: ViewSettings;
 }
 
 /**
@@ -33,8 +30,7 @@ interface TimelinePageProps {
  * There is little point splitting or memoising top level elements
  */
 export default function TimelinePage(props: TimelinePageProps) {
-  const { backstageEvents, general, runtime, selectedId, settings, time, viewSettings } = props;
-  const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
+  const { backstageEvents, general, runtime, selectedId, settings, time } = props;
   // holds copy of the rundown with only relevant events
   const { scopedRundown, firstStart, totalDuration } = useScopedRundown(backstageEvents, selectedId);
   const { getLocalizedString } = useTranslation();
@@ -46,10 +42,6 @@ export default function TimelinePage(props: TimelinePageProps) {
 
   useWindowTitle('Timeline');
 
-  if (!shouldRender) {
-    return null;
-  }
-
   // populate options
   const defaultFormat = getDefaultFormat(settings?.timeFormat);
   const progressOptions = getTimelineOptions(defaultFormat);

apps/client/src/features/viewers/timer/Timer.tsx

@@ -12,12 +12,10 @@ import {
   ViewSettings,
 } from 'ontime-types';
 
-import { overrideStylesURL } from '../../../common/api/constants';
 import { FitText } from '../../../common/components/fit-text/FitText';
 import MultiPartProgressBar from '../../../common/components/multi-part-progress-bar/MultiPartProgressBar';
 import TitleCard from '../../../common/components/title-card/TitleCard';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
-import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
 import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { formatTime, getDefaultFormat } from '../../../common/utils/time';
@@ -62,17 +60,11 @@ interface TimerProps {
 export default function Timer(props: TimerProps) {
   const { auxTimer, customFields, eventNow, eventNext, isMirrored, message, settings, time, viewSettings } = props;
 
-  const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
   const { getLocalizedString } = useTranslation();
   const [searchParams] = useSearchParams();
 
   useWindowTitle('Timer');
 
-  // defer rendering until we load stylesheets
-  if (!shouldRender) {
-    return null;
-  }
-
   // USER OPTIONS
   const userOptions = {
     hideClock: false,