refactor skelton component

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

@@ -155,11 +155,11 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
 
   const PageEditorModeManager = dynamic(
     () => import('./PageEditorModeManager'),
-    { ssr: false, loading: () => <Skelton width={213} height={35} componentHeight={33.99} /> },
+    { ssr: false, loading: () => <Skelton width={213} height={33.99} /> },
   );
   const SubNavButtons = dynamic<SubNavButtonsProps>(
     () => import('./SubNavButtons').then(mod => mod.SubNavButtons),
-    { ssr: false, loading: () => <Skelton width={245} height={16} componentHeight={40} /> },
+    { ssr: false, loading: () => <Skelton width={245} additionalClass='btn-skelton py-2' /> },
   );
 
   const { data: currentPage, mutate: mutateCurrentPage } = useSWRxCurrentPage();

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

@@ -37,8 +37,8 @@ type Props = {
 
 export const GrowiSubNavigation = (props: Props): JSX.Element => {
 
-  const TagLabels = dynamic(() => import('../Page/TagLabels'), { ssr: false, loading: () => <Skelton width={137} height={16} componentHeight={21.99} /> });
-  const AuthorInfo = dynamic(() => import('./AuthorInfo'), { ssr: false, loading: () => <Skelton width={139} height={27} componentHeight={32.84} /> });
+  const TagLabels = dynamic(() => import('../Page/TagLabels'), { ssr: false, loading: () => <Skelton width={137} height={21.99} additionalClass='py-1' /> });
+  const AuthorInfo = dynamic(() => import('./AuthorInfo'), { ssr: false, loading: () => <Skelton width={139} height={32.84} additionalClass='py-1' /> });
 
   const { data: editorMode } = useEditorMode();