スケルトン実装(pagetree)

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

@@ -8,6 +8,7 @@ import {
 import { useSWRxV5MigrationStatus } from '~/stores/page-listing';
 
 import ItemsTree from './PageTree/ItemsTree';
+import ItemsTreeSkelton from './PageTree/ItemsTreeSkelton';
 import { PrivateLegacyPagesLink } from './PageTree/PrivateLegacyPagesLink';
 
 const PageTree: FC = memo(() => {
@@ -27,9 +28,7 @@ const PageTree: FC = memo(() => {
         <div className="grw-sidebar-content-header p-3">
           <h3 className="mb-0">{t('Page Tree')}</h3>
         </div>
-        <div className="text-muted text-center mt-3">
-          <i className="fa fa-lg fa-spinner fa-pulse mr-1"></i>
-        </div>
+        <ItemsTreeSkelton />
       </>
     );
   }

packages/app/src/components/Sidebar/PageTree/ItemsTree.module.scss

@@ -4,6 +4,17 @@ $grw-sidebar-content-footer-height: 50px;
 $grw-pagetree-item-padding-left: 10px;
 
 .grw-pagetree {
+
+  .grw-pagetree-item-skelton {
+    width: 100%;
+    height: 40px;
+    padding: 12px $grw-pagetree-item-padding-left;
+  }
+
+  .grw-pagetree-item-skelton-children {
+    padding-left: $grw-pagetree-item-padding-left * 2;
+  }
+
   :global {
     min-height: calc(100vh - (var.$grw-navbar-height + var.$grw-navbar-border-width + $grw-sidebar-content-header-height + $grw-sidebar-content-footer-height));
 

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

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { Skelton } from '~/components/Skelton';
+
+import styles from './ItemsTree.module.scss';
+
+const ItemsTreeSkelton = (): JSX.Element => {
+
+  return (
+    <ul className={`grw-pagetree ${styles['grw-pagetree']} list-group p-3`} >
+      <Skelton additionalClass={styles['grw-pagetree-item-skelton']} />
+      <Skelton additionalClass={`${styles['grw-pagetree-item-skelton']} ${styles['grw-pagetree-item-skelton-children']}`} />
+      <Skelton additionalClass={`${styles['grw-pagetree-item-skelton']} ${styles['grw-pagetree-item-skelton-children']}`} />
+    </ul>
+  );
+};
+
+export default ItemsTreeSkelton;