Merge pull request #7135 from weseek/imprv/improve-sidebar-components-and-skeleton

imprv: improve sidebar components and skeleton

packages/app/src/components/Sidebar.tsx

@@ -1,5 +1,5 @@
 import React, {
-  useCallback, useEffect, useRef, useState,
+  memo, useCallback, useEffect, useRef, useState,
 } from 'react';
 
 import dynamic from 'next/dynamic';
@@ -22,12 +22,16 @@ import { StickyStretchableScrollerProps } from './StickyStretchableScroller';
 
 import styles from './Sidebar.module.scss';
 
+const StickyStretchableScroller = dynamic<StickyStretchableScrollerProps>(() => import('./StickyStretchableScroller')
+  .then(mod => mod.StickyStretchableScroller), { ssr: false });
+const SidebarContents = dynamic(() => import('./Sidebar/SidebarContents')
+  .then(mod => mod.SidebarContents), { ssr: false, loading: () => <SidebarSkeleton /> });
 
 const sidebarMinWidth = 240;
 const sidebarMinimizeWidth = 20;
 const sidebarFixedWidthInDrawerMode = 320;
 
-const GlobalNavigation = () => {
+const GlobalNavigation = memo(() => {
   const { data: isDrawerMode } = useDrawerMode();
   const { data: currentContents } = useCurrentSidebarContents();
   const { data: isCollapsed, mutate: mutateSidebarCollapsed } = useSidebarCollapsed();
@@ -54,13 +58,10 @@ const GlobalNavigation = () => {
 
   return <SidebarNav onItemSelected={itemSelectedHandler} />;
 
-};
+});
+GlobalNavigation.displayName = 'GlobalNavigation';
 
-const SidebarContentsWrapper = () => {
-  const StickyStretchableScroller = dynamic<StickyStretchableScrollerProps>(() => import('./StickyStretchableScroller')
-    .then(mod => mod.StickyStretchableScroller), { ssr: false, loading: () => <SidebarSkeleton /> });
-  const SidebarContents = dynamic(() => import('./Sidebar/SidebarContents')
-    .then(mod => mod.SidebarContents), { ssr: false, loading: () => <SidebarSkeleton /> });
+const SidebarContentsWrapper = memo(() => {
   const { mutate: mutateSidebarScroller } = useSidebarScrollerRef();
 
   const calcViewHeight = useCallback(() => {
@@ -85,10 +86,11 @@ const SidebarContentsWrapper = () => {
       <DrawerToggler iconClass="icon-arrow-left" />
     </>
   );
-};
+});
+SidebarContentsWrapper.displayName = 'SidebarContentsWrapper';
 
 
-const Sidebar = (): JSX.Element => {
+const Sidebar = memo((): JSX.Element => {
 
   const { data: isDrawerMode } = useDrawerMode();
   const { data: isDrawerOpened, mutate: mutateDrawerOpened } = useDrawerOpened();
@@ -354,6 +356,7 @@ const Sidebar = (): JSX.Element => {
     </>
   );
 
-};
+});
+Sidebar.displayName = 'Sidebar';
 
 export default Sidebar;

packages/app/src/components/Sidebar/RecentChanges.module.scss

@@ -29,7 +29,7 @@
 
   .grw-recent-changes-skeleton-date {
     @include grw-skeleton-text($font-size:10px, $line-height:12px);
-    width: 90px;
+    width: 80px;
   }
 
   .grw-recent-changes-item-lower {

packages/app/src/components/Sidebar/SidebarContents.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 
 import { SidebarContentsType } from '~/interfaces/ui';
 import { useCurrentSidebarContents } from '~/stores/ui';
@@ -8,7 +8,7 @@ import PageTree from './PageTree';
 import RecentChanges from './RecentChanges';
 import Tag from './Tag';
 
-export const SidebarContents = (): JSX.Element => {
+export const SidebarContents = memo(() => {
   const { data: currentSidebarContents } = useCurrentSidebarContents();
 
   let Contents;
@@ -29,5 +29,5 @@ export const SidebarContents = (): JSX.Element => {
   return (
     <Contents />
   );
-
-};
+});
+SidebarContents.displayName = 'SidebarContents';

packages/app/src/components/Sidebar/Skeleton/SidebarSkeleton.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { memo } from 'react';
+
+import { useTranslation } from 'next-i18next';
 
-import { Skeleton } from '~/components/Skeleton';
 import { SidebarContentsType } from '~/interfaces/ui';
 import { useCurrentSidebarContents } from '~/stores/ui';
 
@@ -9,42 +10,40 @@ import PageTreeContentSkeleton from './PageTreeContentSkeleton';
 import RecentChangesContentSkeleton from './RecentChangesContentSkeleton';
 import TagContentSkeleton from './TagContentSkeleton';
 
-import styles from './SidebarSkeleton.module.scss';
-
-export const SidebarHeaderSkeleton = (): JSX.Element => {
-  return (
-    <div className="grw-sidebar-content-header py-3">
-      <Skeleton additionalClass={styles['grw-sidebar-content-header-skeleton']} />
-    </div>
-  );
-};
-
-export const SidebarSkeleton = (): JSX.Element => {
-
+export const SidebarSkeleton = memo(() => {
+  const { t } = useTranslation();
   const { data: currentSidebarContents } = useCurrentSidebarContents();
 
-  let SidebarContentSkeleton: () => JSX.Element;
+  let Contents: () => JSX.Element;
+  let title: string;
   switch (currentSidebarContents) {
 
-    case SidebarContentsType.TAG:
-      SidebarContentSkeleton = TagContentSkeleton;
-      break;
     case SidebarContentsType.RECENT:
-      SidebarContentSkeleton = RecentChangesContentSkeleton;
+      Contents = RecentChangesContentSkeleton;
+      title = t('Recent Changes');
       break;
     case SidebarContentsType.CUSTOM:
-      SidebarContentSkeleton = CustomSidebarContentSkeleton;
+      Contents = CustomSidebarContentSkeleton;
+      title = t('CustomSidebar');
+      break;
+    case SidebarContentsType.TAG:
+      Contents = TagContentSkeleton;
+      title = t('Tags');
       break;
     case SidebarContentsType.TREE:
     default:
-      SidebarContentSkeleton = PageTreeContentSkeleton;
+      Contents = PageTreeContentSkeleton;
+      title = t('Page Tree');
       break;
   }
 
   return (
     <div className={currentSidebarContents === SidebarContentsType.TAG ? 'px-4' : 'px-3'}>
-      <SidebarHeaderSkeleton />
-      <SidebarContentSkeleton />
+      <div className="grw-sidebar-content-header py-3">
+        <h3 className="mb-0">{title}</h3>
+      </div>
+      <Contents />
     </div>
   );
-};
+});
+SidebarSkeleton.displayName = 'SidebarSkeleton';

packages/app/src/components/Sidebar/Skeleton/TagContentSkeleton.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { useTranslation } from 'next-i18next';
+
 import { Skeleton } from '~/components/Skeleton';
 
 import styles from '../Tag.module.scss';
@@ -11,10 +13,11 @@ export const TagListSkeleton = (): JSX.Element => {
 };
 
 const TagContentSkeleton = (): JSX.Element => {
+  const { t } = useTranslation('');
 
   return (
     <>
-      <Skeleton additionalClass={`${styles['grw-tag-skeleton-h3']} my-3`} />
+      <h3 className="my-3">{t('tag_list')}</h3>
       <TagListSkeleton />
     </>
   );

packages/app/src/components/Sidebar/Tag.module.scss

@@ -1,10 +1,5 @@
 @use '~/styles/mixins' as *;
 
-.grw-tag-skeleton-h3 {
-  @include grw-skeleton-h3;
-  max-width: 120px;
-}
-
 .grw-tag-list-skeleton {
   height: 90px;
 }