Merge pull request #6360 from weseek/imprv/101020-refactor-SubNav-skelton-design

Imprv/101020 refactor sub nav skelton design

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

@@ -37,7 +37,7 @@ import ShareLinkIcon from '../Icons/ShareLinkIcon';
 import { Skelton } from '../Skelton';
 
 import { GrowiSubNavigation } from './GrowiSubNavigation';
-import { SubNavButtons } from './SubNavButtons';
+import { SubNavButtonsProps } from './SubNavButtons';
 
 
 type AdditionalMenuItemsProps = {
@@ -153,7 +153,14 @@ type GrowiContextualSubNavigationProps = {
 
 const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps): JSX.Element => {
 
-  const PageEditorModeManager = dynamic(() => import('./PageEditorModeManager'), { ssr: false, loading: () => <Skelton width={208} height={32.49} /> });
+  const PageEditorModeManager = dynamic(
+    () => import('./PageEditorModeManager'),
+    { ssr: false, loading: () => <Skelton width={213} height={33.99} /> },
+  );
+  const SubNavButtons = dynamic<SubNavButtonsProps>(
+    () => import('./SubNavButtons').then(mod => mod.SubNavButtons),
+    { ssr: false, loading: () => <Skelton additionalClass='btn-skelton py-2' /> },
+  );
 
   const { data: currentPage, mutate: mutateCurrentPage } = useSWRxCurrentPage();
   const path = currentPage?.path;
@@ -306,7 +313,7 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
         <div className="d-flex flex-column align-items-end justify-content-center py-md-2" style={{ gap: `${isCompactMode ? '5px' : '7px'}` }}>
 
           { isViewMode && (
-            <div className="h-50">
+            <div className="h-50 w-100">
               <SubNavButtons
                 isCompactMode={isCompactMode}
                 pageId={pageId}

packages/app/src/components/Navbar/GrowiSubNavigation.module.scss

@@ -2,6 +2,14 @@
 @use '~/styles/bootstrap/init' as bs;
 @use '~/styles/mixins';
 
+%subnav-buttons-height {
+  height: 40px;
+}
+
+%compact-subnav-buttons-height {
+  height: 32px;
+}
+
 // https://github.com/css-modules/css-modules/issues/295#issuecomment-404873976
 // workaround to use '&' in global scope
 .grw-subnav {
@@ -36,15 +44,20 @@
       }
     }
 
+    .btn-skelton {
+      @extend %subnav-buttons-height;
+      width: 100%;
+    }
+
     .btn-subscribe {
-      height: 40px;
+      @extend %subnav-buttons-height;
       font-size: 20px;
     }
 
     .btn-like,
     .btn-bookmark,
     .btn-seen-user {
-      height: 40px;
+      @extend %subnav-buttons-height;
       padding-right: 6px;
       padding-left: 8px;
       font-size: 20px;
@@ -135,17 +148,22 @@
         min-height: 90px;
       }
 
+      .btn-skelton {
+        @extend %compact-subnav-buttons-height;
+        width: 100%;
+      }
+
       .btn-like,
       .btn-bookmark,
       .btn-subscribe {
         width: 32px;
-        height: 32px;
+        @extend %compact-subnav-buttons-height;
         padding: 4px;
         font-size: 16px;
       }
       .btn-seen-user {
         width: 48px;
-        height: 32px;
+        @extend %compact-subnav-buttons-height;
         padding: 4px;
         font-size: 16px;
 
@@ -156,7 +174,7 @@
       }
       .btn-page-item-control {
         width: 32px;
-        height: 32px;
+        @extend %compact-subnav-buttons-height;
         font-size: 12px;
       }
     }

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

@@ -11,7 +11,6 @@ import {
 import PagePathNav from '../PagePathNav';
 import { Skelton } from '../Skelton';
 
-import AuthorInfo from './AuthorInfo';
 import DrawerToggler from './DrawerToggler';
 
 
@@ -38,8 +37,8 @@ type Props = {
 
 export const GrowiSubNavigation = (props: Props): JSX.Element => {
 
-  const TagLabels = dynamic(() => import('../Page/TagLabels'), { ssr: false, loading: () => <Skelton width={124.5} height={21.99} /> });
-  const AuthorInfo = dynamic(() => import('./AuthorInfo'), { ssr: false, loading: () => <Skelton width={148.32} height={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();
 

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

@@ -12,10 +12,14 @@ 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, PageItemControlProps,
+  AdditionalMenuItemsRendererProps, ForceHideMenuItems, MenuItemType,
+  PageItemControl,
 } from '../Common/Dropdown/PageItemControl';
-import { Skelton } from '../Skelton';
+import LikeButtons from '../LikeButtons';
+import SubscribeButton from '../SubscribeButton';
+import SeenUserInfo from '../User/SeenUserInfo';
 
 
 type CommonProps = {
@@ -51,20 +55,6 @@ 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: () => <Skelton width={37} additionalClass='btn-subscribe'/> });
-  const LikeButtons = dynamic(() => import('../LikeButtons'), { ssr: false, loading: () => <Skelton width={57.48} additionalClass='btn-like'/> });
-  const BookmarkButtons = dynamic(() => import('../BookmarkButtons'), {
-    ssr: false,
-    loading: () => <Skelton width={53.48} additionalClass='total-bookmarks'/>,
-  });
-  const SeenUserInfo = dynamic(() => import('../User/SeenUserInfo'), { ssr: false, loading: () => <Skelton width={58.98} additionalClass='btn-seen-user'/> });
-  const PageItemControl = dynamic<PageItemControlProps>(() => import('../Common/Dropdown/PageItemControl').then(mod => mod.PageItemControl), {
-    ssr: false,
-    loading: () => <Skelton width={37} additionalClass='btn-page-item-control'/>,
-  });
-
-
   const likerIds = isIPageInfoForEntity(pageInfo) ? (pageInfo.likerIds ?? []).slice(0, 15) : [];
   const seenUserIds = isIPageInfoForEntity(pageInfo) ? (pageInfo.seenUserIds ?? []).slice(0, 15) : [];
 
@@ -215,7 +205,7 @@ const SubNavButtonsSubstance = (props: SubNavButtonsSubstanceProps): JSX.Element
   );
 };
 
-type SubNavButtonsProps= CommonProps & {
+export type SubNavButtonsProps = CommonProps & {
   pageId: string,
   shareLinkId?: string | null,
   revisionId?: string | null,

packages/app/src/components/Skelton.tsx

@@ -12,10 +12,14 @@ export const Skelton = (props: SkeltonProps): JSX.Element => {
     width, height, additionalClass, roundedPill,
   } = props;
 
-  const style = {
+  const skeltonStyle = {
     width,
     height,
   };
 
-  return <div style={style} className={`grw-skelton ${additionalClass} ${roundedPill ? 'rounded-pill' : ''}`}></div>;
+  return (
+    <div style={skeltonStyle} className={`${additionalClass}`}>
+      <div className={`grw-skelton h-100 w-100 ${roundedPill ? 'rounded-pill' : ''}`}></div>
+    </div>
+  );
 };

packages/app/src/styles/theme/_apply-colors-dark.scss

@@ -518,5 +518,5 @@ ul.pagination {
  * skelton
  */
 .grw-skelton {
-  background-color: lighten($bgcolor-subnav, 20%);
+  background-color: lighten($bgcolor-subnav, 15%);
 }

packages/app/src/styles/theme/_apply-colors-light.scss

@@ -410,5 +410,5 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
  * skelton
  */
 .grw-skelton {
-  background-color: $gray-200;
+  background-color: darken($bgcolor-subnav, 10%);
 }