PageTreeのヘッダー含めたスケルトン対応

packages/app/src/components/Sidebar.tsx

@@ -17,6 +17,7 @@ import {
 import DrawerToggler from './Navbar/DrawerToggler';
 import { NavigationResizeHexagon } from './Sidebar/NavigationResizeHexagon';
 import { SidebarNav } from './Sidebar/SidebarNav';
+import { SidebarSkelton } from './Sidebar/SidebarSkelton';
 import { StickyStretchableScrollerProps } from './StickyStretchableScroller';
 
 import styles from './Sidebar.module.scss';
@@ -58,7 +59,8 @@ const GlobalNavigation = () => {
 const SidebarContentsWrapper = () => {
   const StickyStretchableScroller = dynamic<StickyStretchableScrollerProps>(() => import('./StickyStretchableScroller')
     .then(mod => mod.StickyStretchableScroller), { ssr: false });
-  const SidebarContents = dynamic(() => import('./Sidebar/SidebarContents').then(mod => mod.SidebarContents), { ssr: false });
+  const SidebarContents = dynamic(() => import('./Sidebar/SidebarContents')
+    .then(mod => mod.SidebarContents), { ssr: false, loading: () => <SidebarSkelton /> });
   const { mutate: mutateSidebarScroller } = useSidebarScrollerRef();
 
   const calcViewHeight = useCallback(() => {

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

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { Skelton } from '~/components/Skelton';
+
+import ItemsTreeSkelton from './PageTree/ItemsTreeSkelton';
+
+import styles from './SidebarSkelton.module.scss';
+
+const PageTreeSkelton = (): JSX.Element => {
+
+  return (
+    <>
+      <div className="grw-sidebar-content-header p-3">
+        <Skelton additionalClass={styles['grw-sidebar-content-header-skelton']} />
+      </div>
+      <ItemsTreeSkelton />
+    </>
+  );
+};
+
+export default PageTreeSkelton;

packages/app/src/components/Sidebar/SidebarSkelton.module.scss

@@ -0,0 +1,7 @@
+@use '~/styles/variables' as var;
+
+.grw-sidebar-content-header-skelton {
+  max-width: 160px;
+  height: 30px;
+  padding: 7px 0;
+}

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

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { SidebarContentsType } from '~/interfaces/ui';
+import { useCurrentSidebarContents } from '~/stores/ui';
+
+// TODO: PageTree以外のSkelton実装
+// import CustomSidebarSkelton from './CustomSidebarSkelton';
+import PageTreeSkelton from './PageTreeSkelton';
+// import RecentChangesSkelton from './RecentChangesSkelton';
+// import TagSkelton from './TagSkelton';
+
+export const SidebarSkelton = (): JSX.Element => {
+
+  const { data: currentSidebarContents } = useCurrentSidebarContents();
+
+  let Contents;
+  switch (currentSidebarContents) {
+    /*
+    case SidebarContentsType.RECENT:
+      Contents = RecentChangesSkelton;
+      break;
+    case SidebarContentsType.CUSTOM:
+      Contents = CustomSidebarSkelton;
+      break;
+    case SidebarContentsType.TAG:
+      Contents = TagSkelton;
+      break;
+    */
+    default:
+      Contents = PageTreeSkelton;
+  }
+
+  return (
+    <Contents />
+  );
+};