update TagLabels

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

@@ -1,4 +1,5 @@
 import React, { FC } from 'react';
+
 import { useDrawerOpened } from '~/stores/ui';
 
 type Props = {

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

@@ -149,12 +149,9 @@ export const GrowiNavbar = (): JSX.Element => {
         <NavbarRight />
         <Confidential confidential={confidential} />
       </ul>
-
-      { isSearchServiceConfigured && !isDeviceSmallerThanMd && !isSearchPage && (
-        <div className="grw-global-search-container position-absolute">
-          <GlobalSearch />
-        </div>
-      ) }
+      <div className="grw-global-search-container position-absolute">
+        { isSearchServiceConfigured && !isDeviceSmallerThanMd && !isSearchPage && (<GlobalSearch />) }
+      </div>
     </nav>
   );
 

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

@@ -17,7 +17,7 @@ import DrawerToggler from './DrawerToggler';
 import AuthorInfoStyles from './AuthorInfo.module.scss';
 import styles from './GrowiSubNavigation.module.scss';
 
-const TagLabels = dynamic(() => import('../Page/TagLabels'), {
+const TagLabels = dynamic(() => import('../Page/TagLabels').then(mod => mod.TagLabels), {
   ssr: false,
   loading: () => <TagLabelsSkelton />,
 });

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

@@ -17,7 +17,7 @@ export const TagLabelsSkelton = (): JSX.Element => {
   return <Skelton additionalClass={`${styles['grw-tag-labels-skelton']} py-1`} />;
 };
 
-const TagLabels:FC<Props> = (props: Props) => {
+export const TagLabels:FC<Props> = (props: Props) => {
   const { tags, isGuestUser, tagsUpdateInvoked } = props;
 
   const [isTagEditModalShown, setIsTagEditModalShown] = useState(false);
@@ -30,24 +30,20 @@ const TagLabels:FC<Props> = (props: Props) => {
     setIsTagEditModalShown(false);
   };
 
+  if (tags == null) {
+    return <TagLabelsSkelton />;
+  }
+
   return (
     <>
       <div className={`${styles['grw-tag-labels']} grw-tag-labels d-flex align-items-center`}>
         <i className="tag-icon icon-tag mr-2"></i>
-        { tags == null
-          ? (
-            <span className="grw-tag-label badge badge-secondary">―</span>
-          )
-          : (
-            <RenderTagLabels
-              tags={tags}
-              openEditorModal={openEditorModal}
-              isGuestUser={isGuestUser}
-            />
-          )
-        }
+        <RenderTagLabels
+          tags={tags}
+          openEditorModal={openEditorModal}
+          isGuestUser={isGuestUser}
+        />
       </div>
-
       <TagEditModal
         tags={tags}
         isOpen={isTagEditModalShown}
@@ -57,5 +53,3 @@ const TagLabels:FC<Props> = (props: Props) => {
     </>
   );
 };
-
-export default TagLabels;