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