fix: add navbar to skeleton loader

Author: rsbh

packages/chronicle/src/themes/paper/Page.module.css

@@ -225,5 +225,10 @@
 }
 
 .loader {
+    flex: 1;
     margin-bottom: var(--rs-space-3)
 }
+
+.navbarLoaderWrapper {
+    width: 30%;
+}

packages/chronicle/src/themes/paper/Skeleton.tsx

@@ -1,9 +1,18 @@
 import { Skeleton } from '@raystack/apsara';
 import styles from './Page.module.css';
+import { cx } from 'class-variance-authority';
 
 export function PageSkeleton() {
   return (
     <main className={styles.main}>
+      <div className={styles.navbar}>
+        <div className={cx(styles.navLeft, styles.navbarLoaderWrapper)}>
+          <Skeleton highlightColor="var(--rs-color-foreground-base-emphasis)" containerClassName={styles.loader}/>
+        </div>
+        <div className={cx(styles.navRight, styles.navbarLoaderWrapper)}>
+          <Skeleton highlightColor="var(--rs-color-foreground-base-emphasis)" containerClassName={styles.loader}/>
+        </div>
+      </div>
     <div className={styles.content}>
         <header className={styles.articleHeader}>
           <Skeleton width="50%" height="16px" containerClassName={styles.headerLoader}/>