apply style for sidebar nav skeleton

packages/app/src/components/Sidebar.tsx

@@ -62,7 +62,8 @@ const GlobalNavigation = () => {
   }, [currentContents, isCollapsed, isDrawerMode, mutateSidebarCollapsed, scheduleToPut]);
 
   return isLoaded
-    ? <SidebarNav onItemSelected={itemSelectedHandler} />
+    // ? <SidebarNav onItemSelected={itemSelectedHandler} />
+    ? <SidebarNavSkeleton/>
     : <SidebarNavSkeleton/>;
 };
 

packages/app/src/components/Sidebar/SidebarNav.scss

@@ -1,6 +1,6 @@
 @use '~/styles/variables' as var;
 
-.grw-sidebar-nav {
+.grw-sidebar-nav, .grw-sidebar-nav-skeleton {
   $sidebar-nav-button-height: 55px;
 
   %fukidashi-for-active {
@@ -68,7 +68,3 @@
   }
 }
 
-.grw-sidebar-nav-skeleton {
-  width: var.$grw-sidebar-nav-width;
-  height: 100vh;
-}

packages/app/src/components/Sidebar/SidebarNav.tsx

@@ -49,6 +49,17 @@ const PrimaryItem: FC<PrimaryItemProps> = (props: PrimaryItemProps) => {
   );
 };
 
+const PrimaryItemSkeleton: FC = () => {
+  return (
+    <button
+      type="button"
+      className="d-block btn btn-primary"
+    >
+      <i className="material-icons">format_list_bulleted</i>
+    </button>
+  );
+};
+
 type SecondaryItemProps = {
   label: string,
   href: string,
@@ -66,6 +77,15 @@ const SecondaryItem: FC<SecondaryItemProps> = memo((props: SecondaryItemProps) =
   );
 });
 
+// eslint-disable-next-line react/display-name
+const SecondaryItemSkeleton: FC = memo(() => {
+  return (
+    <a href='/' className="d-block btn btn-primary">
+      <i className="material-icons">format_list_bulleted</i>
+    </a>
+  );
+});
+
 
 type Props = {
   onItemSelected: (contents: SidebarContentsType) => void,
@@ -105,7 +125,20 @@ export const SidebarNav: FC<Props> = (props: Props) => {
 
 export const SidebarNavSkeleton: FC = () => {
   return (
-    <div className="grw-sidebar-nav-skeleton"></div>
+    <div className="grw-sidebar-nav-skeleton">
+      <div className="grw-sidebar-nav-primary-container">
+        <PrimaryItemSkeleton />
+        <PrimaryItemSkeleton />
+        <PrimaryItemSkeleton />
+        <PrimaryItemSkeleton />
+      </div>
+      <div className="grw-sidebar-nav-secondary-container">
+        <SecondaryItemSkeleton />
+        <SecondaryItemSkeleton />
+        <SecondaryItemSkeleton />
+        <SecondaryItemSkeleton />
+      </div>
+    </div>
   );
 };
 

packages/app/src/styles/theme/_apply-colors.scss

@@ -230,7 +230,7 @@ ul.pagination {
     }
   }
 
-  .grw-sidebar-nav {
+  .grw-sidebar-nav, .grw-sidebar-nav-skeleton {
     .btn {
       @include button-variant(
         $bgcolor-sidebar,