refactor TagLabels skelton class

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

@@ -89,7 +89,8 @@ export const GrowiSubNavigation = (props: Props): JSX.Element => {
         <div className="grw-path-nav-container">
           { showTagLabel && !isCompactMode && (
             <div className="grw-taglabels-container">
-              <TagLabels tags={tags} isGuestUser={isGuestUser ?? false} tagsUpdateInvoked={tagsUpdatedHandler} />
+              {/* <TagLabels tags={tags} isGuestUser={isGuestUser ?? false} tagsUpdateInvoked={tagsUpdatedHandler} /> */}
+              <Skelton additionalClass={`${TagLabelsStyles['grw-tag-labels-skelton']} py-1`} />
             </div>
           ) }
           <PagePathNav pageId={pageId} pagePath={path} isSingleLineMode={isEditorMode} isCompactMode={isCompactMode} />

packages/app/src/components/Page/TagLabels.module.scss

@@ -1,8 +1,10 @@
 @use '~/styles/bootstrap/init' as bs;
 
+$grw-tag-label-font-size: 12px;
+
 .grw-tag-labels :global {
   .grw-tag-label {
-    font-size: 12px;
+    font-size: $grw-tag-label-font-size;
     font-weight: normal;
     border-radius: bs.$border-radius;
   }
@@ -11,5 +13,6 @@
 
 .grw-tag-labels-skelton :global {
   width: 137px;
-  height: 21.99px;
+  height: calc(#{$grw-tag-label-font-size} + #{bs.$badge-padding-y} * 2);
+  font-size: $grw-tag-label-font-size; // set font-size to use the same em value in bs.$badge-padding-y
 }