refactor: small code improvements

refactor: remove unused code

refactor: extract loader component

refactor: prevent keyword collision

refactor: cleanup hook pending states

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

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>

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

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

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

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 />

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;
 

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

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