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