From e204f671beb74b8a9f80fa0085500c0afd0a8199 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Wed, 23 Jul 2025 21:13:14 +0200
Subject: [PATCH] refactor: small code improvements

refactor: remove unused code

refactor: extract loader component

refactor: prevent keyword collision

refactor: cleanup hook pending states
---
 .../src/common/components/state/Empty.module.scss  |  3 +++
 apps/client/src/common/components/state/Empty.tsx  |  6 +++---
 .../src/common/components/state/EmptyPage.tsx      |  8 +++-----
 .../src/common/hooks-query/useViewSettings.ts      |  4 ++--
 .../panel/settings-panel/ViewSettings.tsx          |  4 ++--
 apps/client/src/features/rundown/RundownEmpty.tsx  |  2 +-
 apps/client/src/theme/_ontimeColours.scss          |  1 -
 apps/client/src/views/ViewLoader.tsx               | 13 ++-----------
 .../loader/Loader.module.scss}                     |  0
 apps/client/src/views/common/loader/Loader.tsx     | 14 ++++++++++++++
 10 files changed, 30 insertions(+), 25 deletions(-)
 rename apps/client/src/views/{ViewLoader.module.scss => common/loader/Loader.module.scss} (100%)
 create mode 100644 apps/client/src/views/common/loader/Loader.tsx

diff --git a/apps/client/src/common/components/state/Empty.module.scss b/apps/client/src/common/components/state/Empty.module.scss
index 9f0e9436f..f9c4ac1fc 100644
--- a/apps/client/src/common/components/state/Empty.module.scss
+++ b/apps/client/src/common/components/state/Empty.module.scss
@@ -9,7 +9,10 @@
   }
 
   .text {
+    display: block;
+    margin-inline: auto;;
     font-weight: 600;
     font-size: 2em;
+    max-width: 600px;
   }
 }
diff --git a/apps/client/src/common/components/state/Empty.tsx b/apps/client/src/common/components/state/Empty.tsx
index 11299a381..0e88e2868 100644
--- a/apps/client/src/common/components/state/Empty.tsx
+++ b/apps/client/src/common/components/state/Empty.tsx
@@ -7,13 +7,13 @@ import style from './Empty.module.scss';
 
 interface EmptyProps {
   text?: string;
-  style?: CSSProperties;
+  injectedStyles?: CSSProperties;
   className?: string;
 }
 
-export default function Empty({ text, className, ...rest }: EmptyProps) {
+export default function Empty({ text, className, injectedStyles }: EmptyProps) {
   return (
-    <div className={cx([style.emptyContainer, className])} {...rest}>
+    <div className={cx([style.emptyContainer, className])} style={injectedStyles}>
       <EmptyImage className={style.empty} />
       {text && <span className={style.text}>{text}</span>}
     </div>
diff --git a/apps/client/src/common/components/state/EmptyPage.tsx b/apps/client/src/common/components/state/EmptyPage.tsx
index 4bfc3f37e..b589989e5 100644
--- a/apps/client/src/common/components/state/EmptyPage.tsx
+++ b/apps/client/src/common/components/state/EmptyPage.tsx
@@ -6,15 +6,13 @@ import style from './EmptyPage.module.scss';
 
 interface EmptyPageProps {
   text?: string;
-  style?: CSSProperties;
+  injectedStyles?: CSSProperties;
 }
 
-export default function EmptyPage(props: EmptyPageProps) {
-  const { text, ...rest } = props;
-
+export default function EmptyPage({ text, injectedStyles }: EmptyPageProps) {
   return (
     <div className={style.page}>
-      <Empty text={text} {...rest} />
+      <Empty text={text} injectedStyles={injectedStyles} />
     </div>
   );
 }
diff --git a/apps/client/src/common/hooks-query/useViewSettings.ts b/apps/client/src/common/hooks-query/useViewSettings.ts
index 8da03e1c0..882b08482 100644
--- a/apps/client/src/common/hooks-query/useViewSettings.ts
+++ b/apps/client/src/common/hooks-query/useViewSettings.ts
@@ -7,7 +7,7 @@ import { VIEW_SETTINGS } from '../api/constants';
 import { viewsSettingsPlaceholder } from '../models/ViewSettings.type';
 
 export default function useViewSettings() {
-  const { data, isPending } = useQuery({
+  const { data, status } = useQuery({
     queryKey: VIEW_SETTINGS,
     queryFn: getViewSettings,
     placeholderData: (previousData, _previousQuery) => previousData,
@@ -24,5 +24,5 @@ export default function useViewSettings() {
     },
   });
 
-  return { data: data ?? viewsSettingsPlaceholder, mutateAsync, isPending };
+  return { data: data ?? viewsSettingsPlaceholder, status, mutateAsync };
 }
diff --git a/apps/client/src/features/app-settings/panel/settings-panel/ViewSettings.tsx b/apps/client/src/features/app-settings/panel/settings-panel/ViewSettings.tsx
index 5fced34c4..c6542adff 100644
--- a/apps/client/src/features/app-settings/panel/settings-panel/ViewSettings.tsx
+++ b/apps/client/src/features/app-settings/panel/settings-panel/ViewSettings.tsx
@@ -18,7 +18,7 @@ import CodeEditorModal from './composite/StyleEditorModal';
 const cssOverrideDocsUrl = 'https://docs.getontime.no/features/custom-styling/';
 
 export default function ViewSettings() {
-  const { data, isPending, mutateAsync } = useViewSettings();
+  const { data, status, mutateAsync } = useViewSettings();
   const [isCodeEditorOpen, codeEditorHandler] = useDisclosure();
 
   const {
@@ -87,7 +87,7 @@ export default function ViewSettings() {
           <ExternalLink href={cssOverrideDocsUrl}>See the docs</ExternalLink>
         </Info>
         <Panel.Section>
-          <Panel.Loader isLoading={isPending} />
+          <Panel.Loader isLoading={status === 'pending'} />
           <Panel.Error>{errors.root?.message}</Panel.Error>
           <Panel.ListGroup>
             <CodeEditorModal isOpen={isCodeEditorOpen} onClose={codeEditorHandler.close} />
diff --git a/apps/client/src/features/rundown/RundownEmpty.tsx b/apps/client/src/features/rundown/RundownEmpty.tsx
index 3620432c3..5b7dd551f 100644
--- a/apps/client/src/features/rundown/RundownEmpty.tsx
+++ b/apps/client/src/features/rundown/RundownEmpty.tsx
@@ -16,7 +16,7 @@ export default function RundownEmpty(props: RundownEmptyProps) {
 
   return (
     <div className={style.empty}>
-      <Empty style={{ marginTop: '5vh', marginBottom: '3rem' }} />
+      <Empty injectedStyles={{ marginTop: '5vh', marginBottom: '3rem' }} />
       <div className={style.inline}>
         <Button onClick={() => handleAddNew(SupportedEntry.Event)} variant='primary' size='large'>
           <IoAdd />
diff --git a/apps/client/src/theme/_ontimeColours.scss b/apps/client/src/theme/_ontimeColours.scss
index c3c2a08e2..0d962d528 100644
--- a/apps/client/src/theme/_ontimeColours.scss
+++ b/apps/client/src/theme/_ontimeColours.scss
@@ -32,7 +32,6 @@ $gray-1250: #202020;
 $gray-1300: #1a1a1a;
 $gray-1325: #151515;
 $gray-1350: #101010;
-$pure-white: #fff;
 $ui-white: $gray-50;
 $ui-black: $gray-1350;
 
diff --git a/apps/client/src/views/ViewLoader.tsx b/apps/client/src/views/ViewLoader.tsx
index 1e15552d9..ed5df9db4 100644
--- a/apps/client/src/views/ViewLoader.tsx
+++ b/apps/client/src/views/ViewLoader.tsx
@@ -4,7 +4,7 @@ import { overrideStylesURL } from '../common/api/constants';
 import { useRuntimeStylesheet } from '../common/hooks/useRuntimeStylesheet';
 import useViewSettings from '../common/hooks-query/useViewSettings';
 
-import style from './ViewLoader.module.scss';
+import Loader from './common/loader/Loader';
 
 export default function ViewLoader({ children }: PropsWithChildren) {
   const { data } = useViewSettings();
@@ -15,16 +15,7 @@ export default function ViewLoader({ children }: PropsWithChildren) {
   // suspense would have the advantage of being triggered also by react-query
 
   if (!shouldRender) {
-    return (
-      <div className={style.loader}>
-        <div className={style.ellipsis}>
-          <div />
-          <div />
-          <div />
-          <div />
-        </div>
-      </div>
-    );
+    return <Loader />;
   }
 
   // eslint-disable-next-line react/jsx-no-useless-fragment -- ensuring JSX return
diff --git a/apps/client/src/views/ViewLoader.module.scss b/apps/client/src/views/common/loader/Loader.module.scss
similarity index 100%
rename from apps/client/src/views/ViewLoader.module.scss
rename to apps/client/src/views/common/loader/Loader.module.scss
diff --git a/apps/client/src/views/common/loader/Loader.tsx b/apps/client/src/views/common/loader/Loader.tsx
new file mode 100644
index 000000000..41c2077f9
--- /dev/null
+++ b/apps/client/src/views/common/loader/Loader.tsx
@@ -0,0 +1,14 @@
+import style from './Loader.module.scss';
+
+export default function Loader() {
+  return (
+    <div className={style.loader}>
+      <div className={style.ellipsis}>
+        <div />
+        <div />
+        <div />
+        <div />
+      </div>
+    </div>
+  );
+}