create Skelton compoent

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

@@ -28,16 +28,14 @@ import {
   useIsAbleToShowPageEditorModeManager, useIsAbleToShowPageAuthors,
 } from '~/stores/ui';
 
-import { AdditionalMenuItemsRendererProps } from '../Common/Dropdown/PageItemControl';
 import CreateTemplateModal from '../CreateTemplateModal';
 import AttachmentIcon from '../Icons/AttachmentIcon';
 import HistoryIcon from '../Icons/HistoryIcon';
 import PresentationIcon from '../Icons/PresentationIcon';
 import ShareLinkIcon from '../Icons/ShareLinkIcon';
-
+import { Skelton } from '../Skelton';
 
 import { GrowiSubNavigation } from './GrowiSubNavigation';
-import PageEditorModeManager from './PageEditorModeManager';
 import { SubNavButtons } from './SubNavButtons';
 
 
@@ -151,17 +149,9 @@ type GrowiContextualSubNavigationProps = {
   isLinkSharingDisabled: boolean,
 };
 
-const PageEditorModeManagerSkelton = () => {
-  const style = {
-    width: 208,
-    height: 32.49,
-  };
-  return <div className="skelton" style={style}></div>;
-};
-
 const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps): JSX.Element => {
 
-  const PageEditorModeManager = dynamic(() => import('./PageEditorModeManager'), { ssr: false, loading: () => <PageEditorModeManagerSkelton/> });
+  const PageEditorModeManager = dynamic(() => import('./PageEditorModeManager'), { ssr: false, loading: () => <Skelton width={208} height={32.49} /> });
 
   const { data: currentPage, mutate: mutateCurrentPage } = useSWRxCurrentPage();
   const path = currentPage?.path;

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

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React from 'react';
 
 import dynamic from 'next/dynamic';
 
@@ -8,12 +8,13 @@ import {
   EditorMode, useEditorMode,
 } from '~/stores/ui';
 
-// import TagLabels from '../Page/TagLabels';
 import PagePathNav from '../PagePathNav';
+import { Skelton } from '../Skelton';
 
 import AuthorInfo from './AuthorInfo';
 import DrawerToggler from './DrawerToggler';
 
+
 import styles from './GrowiSubNavigation.module.scss';
 
 
@@ -35,16 +36,6 @@ type Props = {
   additionalClasses?: string[],
 }
 
-const TagLabelsSkelton = memo(() => {
-  const style = {
-    height: 21.99,
-    width: 124.5,
-  };
-
-  return <div className="skelton" style={style}></div>;
-});
-TagLabelsSkelton.displayName = 'TagLabelsSkelton';
-
 export const GrowiSubNavigation = (props: Props): JSX.Element => {
 
   const { data: editorMode } = useEditorMode();
@@ -70,7 +61,7 @@ export const GrowiSubNavigation = (props: Props): JSX.Element => {
     return <></>;
   }
 
-  const TagLabels = dynamic(() => import('../Page/TagLabels'), { ssr: false, loading: () => <TagLabelsSkelton/> });
+  const TagLabels = dynamic(() => import('../Page/TagLabels'), { ssr: false, loading: () => <Skelton width={124.5} height={21.99} /> });
 
   return (
     <div className={

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

@@ -1,4 +1,4 @@
-import React, { useCallback, memo } from 'react';
+import React, { useCallback } from 'react';
 
 import dynamic from 'next/dynamic';
 
@@ -12,13 +12,10 @@ import { IPageForPageDuplicateModal } from '~/stores/modal';
 import { useSWRBookmarkInfo } from '../../stores/bookmark';
 import { useSWRxPageInfo } from '../../stores/page';
 import { useSWRxUsersList } from '../../stores/user';
-import BookmarkButtons from '../BookmarkButtons';
 import {
-  AdditionalMenuItemsRendererProps, ForceHideMenuItems, MenuItemType, PageItemControl, PageItemControlProps,
+  AdditionalMenuItemsRendererProps, ForceHideMenuItems, MenuItemType, PageItemControlProps,
 } from '../Common/Dropdown/PageItemControl';
-import LikeButtons from '../LikeButtons';
-import SubscribeButton from '../SubscribeButton';
-import SeenUserInfo from '../User/SeenUserInfo';
+import { Skelton } from '../Skelton';
 
 
 type CommonProps = {
@@ -40,22 +37,6 @@ type SubNavButtonsSubstanceProps = CommonProps & {
   pageInfo: IPageInfoAll,
 }
 
-type SubNavButtonSkeltonProps = {
-  width: number,
-  height: number,
-}
-
-const SubNavButtonSkelton = memo((props: SubNavButtonSkeltonProps): JSX.Element => {
-  const { width, height } = props;
-  const style = {
-    width,
-    height,
-  };
-
-  return <div className="skelton" style={style}></div>;
-});
-SubNavButtonSkelton.displayName = 'SubNavButtonSkelton';
-
 const SubNavButtonsSubstance = (props: SubNavButtonsSubstanceProps): JSX.Element => {
   const {
     pageInfo,
@@ -71,13 +52,13 @@ const SubNavButtonsSubstance = (props: SubNavButtonsSubstanceProps): JSX.Element
   const { data: bookmarkInfo, mutate: mutateBookmarkInfo } = useSWRBookmarkInfo(pageId);
 
   // dynamic import for show skelton
-  const SubscribeButton = dynamic(() => import('../SubscribeButton'), { ssr: false, loading: () => <SubNavButtonSkelton width={37} height={40}/> });
-  const LikeButtons = dynamic(() => import('../LikeButtons'), { ssr: false, loading: () => <SubNavButtonSkelton width={57.48} height={40}/> });
-  const BookmarkButtons = dynamic(() => import('../BookmarkButtons'), { ssr: false, loading: () => <SubNavButtonSkelton width={53.48} height={40}/> });
-  const SeenUserInfo = dynamic(() => import('../User/SeenUserInfo'), { ssr: false, loading: () => <SubNavButtonSkelton width={58.98} height={40}/> });
+  const SubscribeButton = dynamic(() => import('../SubscribeButton'), { ssr: false, loading: () => <Skelton width={37} height={40}/> });
+  const LikeButtons = dynamic(() => import('../LikeButtons'), { ssr: false, loading: () => <Skelton width={57.48} height={40}/> });
+  const BookmarkButtons = dynamic(() => import('../BookmarkButtons'), { ssr: false, loading: () => <Skelton width={53.48} height={40}/> });
+  const SeenUserInfo = dynamic(() => import('../User/SeenUserInfo'), { ssr: false, loading: () => <Skelton width={58.98} height={40}/> });
   const PageItemControl = dynamic<PageItemControlProps>(() => import('../Common/Dropdown/PageItemControl').then(mod => mod.PageItemControl), {
     ssr: false,
-    loading: () => <SubNavButtonSkelton width={37} height={40}/>,
+    loading: () => <Skelton width={37} height={40}/>,
   });
 
 

packages/app/src/styles/_skelton.scss → packages/app/src/components/Skelton.module.scss

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

packages/app/src/components/Skelton.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import styles from './Skelton.module.scss';
+
+type SkeltonProps = {
+  width: number,
+  height: number,
+  additionalClass?: string
+}
+
+export const Skelton = (props: SkeltonProps): JSX.Element => {
+  const { width, height, additionalClass } = props;
+
+  const style = {
+    width,
+    height,
+  };
+
+  return <div style={style} className={`${styles['grw-skelton']} ${additionalClass}`}></div>;
+};

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

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