implement TagLabels skelton

packages/app/src/components/Navbar/GrowiSubNavigation.tsx

@@ -8,8 +8,8 @@ import {
   EditorMode, useEditorMode,
 } from '~/stores/ui';
 
-import TagLabels from '../Page/TagLabels';
-// import PagePathNav from '../PagePathNav';
+// import TagLabels from '../Page/TagLabels';
+import PagePathNav from '../PagePathNav';
 
 import AuthorInfo from './AuthorInfo';
 import DrawerToggler from './DrawerToggler';
@@ -37,7 +37,7 @@ type Props = {
 
 export const GrowiSubNavigation = (props: Props): JSX.Element => {
 
-  const PagePathNav = dynamic(() => import('../PagePathNav'), { ssr: false });
+  // const PagePathNav = dynamic(() => import('../PagePathNav'), { ssr: false });
 
   const { data: editorMode } = useEditorMode();
 
@@ -62,6 +62,17 @@ export const GrowiSubNavigation = (props: Props): JSX.Element => {
     return <></>;
   }
 
+  const TagLabelsSkelton = () => {
+    const style = {
+      height: 21.99,
+      width: 124.5,
+    };
+
+    return <div className="skelton" style={style}></div>;
+  };
+
+  const TagLabels = dynamic(() => import('../Page/TagLabels'), { ssr: false, loading: () => <TagLabelsSkelton/> });
+
   return (
     <div className={
       `grw-subnav ${styles['grw-subnav']} d-flex align-items-center justify-content-between`

packages/app/src/components/PagePathNav.tsx

@@ -1,10 +1,13 @@
 import React, { FC } from 'react';
+
 import { DevidedPagePath } from '@growi/core';
-import PagePathHierarchicalLink from './PagePathHierarchicalLink';
-import CopyDropdown from './Page/CopyDropdown';
+import dynamic from 'next/dynamic';
 
 import LinkedPagePath from '../models/linked-page-path';
 
+import PagePathHierarchicalLink from './PagePathHierarchicalLink';
+// import CopyDropdown from './Page/CopyDropdown';
+
 
 type Props = {
   pagePath: string,
@@ -19,6 +22,8 @@ const PagePathNav: FC<Props> = (props: Props) => {
   } = props;
   const dPagePath = new DevidedPagePath(pagePath, false, true);
 
+  const CopyDropdown = dynamic(() => import('./Page/CopyDropdown'), { ssr: false });
+
   let formerLink;
   let latterLink;
 

packages/app/src/styles/_skelton.scss

@@ -0,0 +1,5 @@
+@use '~/styles/bootstrap/init' as bs;
+
+.skelton {
+  background-color: bs.$gray-200;
+}

packages/app/src/styles/style-next.scss

@@ -41,6 +41,7 @@
 // @import 'page-content-footer';
 // @import 'handsontable';
 @import 'layout';
+@import 'skelton';
 // @import 'login';
 // @import 'me';
 // @import 'mirror_mode';