update TagLabels skelton

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

@@ -8,18 +8,18 @@ import {
   EditorMode, useEditorMode,
 } from '~/stores/ui';
 
+import { TagLabelsSkelton } from '../Page/TagLabels';
 import PagePathNav from '../PagePathNav';
 import { Skelton } from '../Skelton';
 
 import DrawerToggler from './DrawerToggler';
 
-import TagLabelsStyles from '../Page/TagLabels.module.scss';
 import AuthorInfoStyles from './AuthorInfo.module.scss';
 import styles from './GrowiSubNavigation.module.scss';
 
 const TagLabels = dynamic(() => import('../Page/TagLabels'), {
   ssr: false,
-  loading: () => <Skelton additionalClass={`${TagLabelsStyles['grw-tag-labels-skelton']} py-1`} />,
+  loading: () => <TagLabelsSkelton />,
 });
 const AuthorInfo = dynamic(() => import('./AuthorInfo'), {
   ssr: false,

packages/app/src/components/Page/TagLabels.tsx

@@ -1,5 +1,7 @@
 import React, { FC, useState } from 'react';
 
+import { Skelton } from '../Skelton';
+
 import RenderTagLabels from './RenderTagLabels';
 import TagEditModal from './TagEditModal';
 
@@ -11,6 +13,9 @@ type Props = {
   tagsUpdateInvoked?: (tags: string[]) => Promise<void> | void,
 }
 
+export const TagLabelsSkelton = (): JSX.Element => {
+  return <Skelton additionalClass={`${styles['grw-tag-labels-skelton']} py-1`} />;
+};
 
 const TagLabels:FC<Props> = (props: Props) => {
   const { tags, isGuestUser, tagsUpdateInvoked } = props;