implement SidebarNav skeleton

packages/app/src/components/Sidebar.tsx

@@ -2,6 +2,9 @@ import React, {
   useCallback, useEffect, useRef, useState,
 } from 'react';
 
+import { isServer } from '@growi/core';
+import dynamic from 'next/dynamic';
+
 import { useUserUISettings } from '~/client/services/user-ui-settings';
 import {
   useDrawerMode, useDrawerOpened,
@@ -15,43 +18,53 @@ import {
 import DrawerToggler from './Navbar/DrawerToggler';
 import { NavigationResizeHexagon } from './Sidebar/NavigationResizeHexagon';
 import SidebarContents from './Sidebar/SidebarContents';
-import SidebarNav from './Sidebar/SidebarNav';
+import { SidebarNavSkeleton } from './Sidebar/SidebarNav';
 import { StickyStretchableScroller } from './StickyStretchableScroller';
 
 import './Sidebar.scss';
 
+
 const sidebarMinWidth = 240;
 const sidebarMinimizeWidth = 20;
 const sidebarFixedWidthInDrawerMode = 320;
 
 
-// const GlobalNavigation = () => {
-//   const { data: isDrawerMode } = useDrawerMode();
-//   const { data: currentContents } = useCurrentSidebarContents();
-//   const { data: isCollapsed, mutate: mutateSidebarCollapsed } = useSidebarCollapsed();
+const GlobalNavigation = () => {
+  const SidebarNav = dynamic(() => import('./Sidebar/SidebarNav').then(mod => mod.SidebarNav), { ssr: false });
+  const { data: isDrawerMode } = useDrawerMode();
+  const { data: currentContents } = useCurrentSidebarContents();
+  const { data: isCollapsed, mutate: mutateSidebarCollapsed } = useSidebarCollapsed();
 
-//   const { scheduleToPut } = useUserUISettings();
+  const { scheduleToPut } = useUserUISettings();
 
-//   const itemSelectedHandler = useCallback((selectedContents) => {
-//     if (isDrawerMode) {
-//       return;
-//     }
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    if (isServer()) return;
+    setIsLoaded(true);
+  });
+  const itemSelectedHandler = useCallback((selectedContents) => {
+    if (isDrawerMode) {
+      return;
+    }
 
-//     let newValue = false;
+    let newValue = false;
 
-//     // already selected
-//     if (currentContents === selectedContents) {
-//       // toggle collapsed
-//       newValue = !isCollapsed;
-//     }
+    // already selected
+    if (currentContents === selectedContents) {
+      // toggle collapsed
+      newValue = !isCollapsed;
+    }
 
-//     mutateSidebarCollapsed(newValue, false);
-//     scheduleToPut({ isSidebarCollapsed: newValue });
+    mutateSidebarCollapsed(newValue, false);
+    scheduleToPut({ isSidebarCollapsed: newValue });
 
-//   }, [currentContents, isCollapsed, isDrawerMode, mutateSidebarCollapsed, scheduleToPut]);
+  }, [currentContents, isCollapsed, isDrawerMode, mutateSidebarCollapsed, scheduleToPut]);
 
-//   return <SidebarNav onItemSelected={itemSelectedHandler} />;
-// };
+  return isLoaded
+    ? <SidebarNav onItemSelected={itemSelectedHandler} />
+    : <SidebarNavSkeleton/>;
+};
 
 // const SidebarContentsWrapper = () => {
 //   const { mutate: mutateSidebarScroller } = useSidebarScrollerRef();
@@ -300,7 +313,7 @@ const Sidebar = (): JSX.Element => {
           >
             <div className="grw-navigation-wrap">
               <div className="grw-global-navigation">
-                {/* <GlobalNavigation></GlobalNavigation> */}
+                <GlobalNavigation></GlobalNavigation>
               </div>
               <div
                 ref={resizableContainer}

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

@@ -67,3 +67,8 @@
     }
   }
 }
+
+.grw-sidebar-nav-skeleton {
+  width: var.$grw-sidebar-nav-width;
+  height: 100vh;
+}

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

@@ -71,7 +71,7 @@ type Props = {
   onItemSelected: (contents: SidebarContentsType) => void,
 }
 
-const SidebarNav: FC<Props> = (props: Props) => {
+export const SidebarNav: FC<Props> = (props: Props) => {
 
   const { data: currentUser } = useCurrentUser();
 
@@ -103,4 +103,10 @@ const SidebarNav: FC<Props> = (props: Props) => {
 
 };
 
+export const SidebarNavSkeleton: FC = () => {
+  return (
+    <div className="grw-sidebar-nav-skeleton"></div>
+  );
+};
+
 export default SidebarNav;