file arrangement

packages/app/src/components/Sidebar.tsx

@@ -17,7 +17,7 @@ import {
 import DrawerToggler from './Navbar/DrawerToggler';
 import { NavigationResizeHexagon } from './Sidebar/NavigationResizeHexagon';
 import { SidebarNav } from './Sidebar/SidebarNav';
-import { SidebarSkelton } from './Sidebar/SidebarSkelton';
+import { SidebarSkelton } from './Sidebar/Skelton/SidebarSkelton';
 import { StickyStretchableScrollerProps } from './StickyStretchableScroller';
 
 import styles from './Sidebar.module.scss';

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

@@ -9,9 +9,9 @@ import { useCurrentPagePath } from '~/stores/page';
 import { useSWRxV5MigrationStatus } from '~/stores/page-listing';
 
 import ItemsTree from './PageTree/ItemsTree';
-import ItemsTreeSkelton from './PageTree/ItemsTreeSkelton';
 import { PrivateLegacyPagesLink } from './PageTree/PrivateLegacyPagesLink';
 import { SidebarHeader } from './SidebarHeader';
+import PageTreeSkelton from './Skelton/PageTreeSkelton';
 
 const PageTree: FC = memo(() => {
   const { t } = useTranslation();
@@ -28,7 +28,7 @@ const PageTree: FC = memo(() => {
     return (
       <>
         <SidebarHeader title='Page Tree' />
-        <ItemsTreeSkelton />
+        <PageTreeSkelton />
       </>
     );
   }

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

@@ -1,16 +0,0 @@
-import React from 'react';
-
-import ItemsTreeSkelton from './PageTree/ItemsTreeSkelton';
-import SidebarHeaderSkelton from './Skelton/SidebarHeaderSkelton';
-
-const PageTreeSkelton = (): JSX.Element => {
-
-  return (
-    <>
-      <SidebarHeaderSkelton />
-      <ItemsTreeSkelton />
-    </>
-  );
-};
-
-export default PageTreeSkelton;

packages/app/src/components/Sidebar/PageTree/ItemsTreeSkelton.tsx → packages/app/src/components/Sidebar/Skelton/PageTreeSkelton.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 import { Skelton } from '~/components/Skelton';
 
-import styles from './ItemsTree.module.scss';
+import styles from '../PageTree/ItemsTree.module.scss';
 
-const ItemsTreeSkelton = (): JSX.Element => {
+const PageTreeSkelton = (): JSX.Element => {
 
   return (
     <ul className={`grw-pagetree ${styles['grw-pagetree']} list-group p-3`} >
@@ -15,4 +15,4 @@ const ItemsTreeSkelton = (): JSX.Element => {
   );
 };
 
-export default ItemsTreeSkelton;
+export default PageTreeSkelton;

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

@@ -9,6 +9,7 @@ import { useCurrentSidebarContents } from '~/stores/ui';
 import PageTreeSkelton from './PageTreeSkelton';
 // import RecentChangesSkelton from './RecentChangesSkelton';
 // import TagSkelton from './TagSkelton';
+import SidebarHeaderSkelton from './SidebarHeaderSkelton';
 
 export const SidebarSkelton = (): JSX.Element => {
 
@@ -32,6 +33,9 @@ export const SidebarSkelton = (): JSX.Element => {
   }
 
   return (
-    <Contents />
+    <>
+      <SidebarHeaderSkelton />
+      <Contents />
+    </>
   );
 };