implemented all skeletons of sidebar contents

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

@@ -11,6 +11,7 @@ import loggerFactory from '~/utils/logger';
 import RevisionRenderer from '../Page/RevisionRenderer';
 
 import { SidebarHeaderReloadButton } from './SidebarHeaderReloadButton';
+import CustomSidebarContentSkeleton from './Skeleton/CustomSidebarContentSkeleton';
 
 import styles from './CustomSidebar.module.scss';
 
@@ -53,9 +54,7 @@ const CustomSidebar: FC = () => {
 
       {
         isLoading && (
-          <div className="text-muted text-center">
-            <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
-          </div>
+          <CustomSidebarContentSkeleton />
         )
       }
 

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

@@ -17,6 +17,7 @@ import FormattedDistanceDate from '../FormattedDistanceDate';
 
 import InfiniteScroll from './InfiniteScroll';
 import { SidebarHeaderReloadButton } from './SidebarHeaderReloadButton';
+import RecentChangesContentSkeleton from './Skeleton/RecentChangesContentSkeleton';
 
 import TagLabelsStyles from '../Page/TagLabels.module.scss';
 import styles from './RecentChanges.module.scss';
@@ -177,21 +178,25 @@ const RecentChanges = (): JSX.Element => {
           </div>
         </div>
       </div>
-      <div className="grw-recent-changes p-3">
-        <ul className="list-group list-group-flush">
-          <InfiniteScroll
-            swrInifiniteResponse={swr}
-            isReachingEnd={isReachingEnd}
-          >
-            {pages => pages.map(page => (
-              isRecentChangesSidebarSmall
-                ? <SmallPageItem key={page._id} page={page} />
-                : <LargePageItem key={page._id} page={page} />
-            ))
-            }
-          </InfiniteScroll>
-        </ul>
-      </div>
+      {
+        isLoading ? <RecentChangesContentSkeleton /> : (
+          <div className="grw-recent-changes p-3">
+            <ul className="list-group list-group-flush">
+              <InfiniteScroll
+                swrInifiniteResponse={swr}
+                isReachingEnd={isReachingEnd}
+              >
+                {pages => pages.map(page => (
+                  isRecentChangesSidebarSmall
+                    ? <SmallPageItem key={page._id} page={page} />
+                    : <LargePageItem key={page._id} page={page} />
+                ))
+                }
+              </InfiniteScroll>
+            </ul>
+          </div>
+        )
+      }
     </div>
   );
 

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

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { Skeleton } from '~/components/Skeleton';
+
+import customSidebarStyles from '../CustomSidebar.module.scss';
+import styles from './SidebarSkeleton.module.scss';
+
+const CustomSidebarContentSkeleton = (): JSX.Element => {
+
+  return (
+    <div className={`p-3 grw-custom-sidebar-content ${customSidebarStyles['grw-custom-sidebar-content']}`}>
+      <Skeleton additionalClass={`${styles['grw-sidebar-skeleton-text-full']} my-3`} />
+      <Skeleton additionalClass={`${styles['grw-sidebar-skeleton-text-full']} my-3`} />
+      <Skeleton additionalClass={`${styles['grw-sidebar-skeleton-text-large']} my-3`} />
+    </div>
+  );
+};
+
+export default CustomSidebarContentSkeleton;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { Skeleton } from '~/components/Skeleton';
+
+import recentChangesStyles from '../RecentChanges.module.scss';
+import styles from './SidebarSkeleton.module.scss';
+
+const SkeletonItem = () => {
+
+  return (
+    <li className={`list-group-item ${recentChangesStyles['list-group-item']} py-3 px-0`}>
+      <div className="d-flex w-100">
+        <Skeleton additionalClass='rounded-circle picture' roundedPill />
+        <div className="flex-grow-1 ml-2">
+          <Skeleton additionalClass={`${styles['grw-sidebar-skeleton-text-medium']} mb-2`} />
+          <Skeleton additionalClass={`${styles['grw-sidebar-skeleton-text-medium']} my-2`} />
+          <div className="d-flex justify-content-between grw-recent-changes-item-lower mt-2">
+            <Skeleton additionalClass={styles['grw-sidebar-skeleton-recent-changes-icons']} />
+            <Skeleton additionalClass={styles['grw-sidebar-skeleton-recent-changes-icons']} />
+          </div>
+        </div>
+      </div>
+    </li>
+  );
+};
+
+const RecentChangesContentSkeleton = (): JSX.Element => {
+
+  return (
+    <div className="grw-recent-changes p-3">
+      <ul className="list-group list-group-flush">
+        <SkeletonItem />
+        <SkeletonItem />
+        <SkeletonItem />
+      </ul>
+    </div>);
+};
+
+export default RecentChangesContentSkeleton;

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Skeleton } from '~/components/Skeleton';
 
-import styles from './SidebarHeaderSkeleton.module.scss';
+import styles from './SidebarSkeleton.module.scss';
 
 const SidebarHeaderSkeleton = (): JSX.Element => {
   return (

packages/app/src/components/Sidebar/Skeleton/SidebarSkeleton.module.scss

@@ -0,0 +1,44 @@
+$h3-line-height: 30px;
+$h5-line-height: 18px;
+
+.grw-sidebar-content-header-skeleton {
+  max-width: 160px;
+  height: $h3-line-height;
+  padding: (($h3-line-height - 16px) / 2) 0;
+}
+
+.grw-sidebar-skeleton-text {
+  height: 1rem;
+}
+
+.grw-sidebar-skeleton-text-medium {
+  max-width: 120px;
+  height: 1rem;
+}
+
+.grw-sidebar-skeleton-text-large {
+  max-width: 200px;
+  height: 1rem;
+}
+
+.grw-sidebar-skeleton-text-full {
+  max-width: 100%;
+  height: 1rem;
+}
+
+.grw-skeleton-h3 {
+  max-width: 160px;
+  height: $h5-line-height;
+  padding: (($h5-line-height - 14px) / 2) 0;
+}
+
+.grw-skeleton-h5 {
+  max-width: 160px;
+  height: $h5-line-height;
+  padding: (($h5-line-height - 16px) / 2) 0;
+}
+
+.grw-sidebar-skeleton-recent-changes-icons {
+  width: 80px;
+  height: 1rem;
+}

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

@@ -3,34 +3,32 @@ import React from 'react';
 import { SidebarContentsType } from '~/interfaces/ui';
 import { useCurrentSidebarContents } from '~/stores/ui';
 
-// TODO: implement Skeleton of other 3 components
-
-// import CustomSidebarContentSkeleton from './CustomSidebarContentSkeleton';
+import CustomSidebarContentSkeleton from './CustomSidebarContentSkeleton';
 import PageTreeContentSkeleton from './PageTreeContentSkeleton';
-// import RecentChangesContentSkeleton from './RecentChangesContentSkeleton';
-// import TagContentSkeleton from './TagContentSkeleton';
+import RecentChangesContentSkeleton from './RecentChangesContentSkeleton';
 import SidebarHeaderSkeleton from './SidebarHeaderSkeleton';
+import TagContentSkeleton from './TagContentSkeleton';
 
 export const SidebarSkeleton = (): JSX.Element => {
 
   const { data: currentSidebarContents } = useCurrentSidebarContents();
 
-  let SidebarContentSkeleton;
+  let SidebarContentSkeleton: () => JSX.Element;
   switch (currentSidebarContents) {
 
-    /*
+    case SidebarContentsType.TAG:
+      SidebarContentSkeleton = TagContentSkeleton;
+      break;
+    case SidebarContentsType.TREE:
+      SidebarContentSkeleton = PageTreeContentSkeleton;
+      break;
     case SidebarContentsType.RECENT:
       SidebarContentSkeleton = RecentChangesContentSkeleton;
       break;
     case SidebarContentsType.CUSTOM:
+    default:
       SidebarContentSkeleton = CustomSidebarContentSkeleton;
       break;
-    case SidebarContentsType.TAG:
-      SidebarContentSkeleton = TagContentSkeleton;
-      break;
-    */
-    default:
-      SidebarContentSkeleton = PageTreeContentSkeleton;
   }
 
   return (

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

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { Skeleton } from '~/components/Skeleton';
+
+import customSidebarStyles from '../CustomSidebar.module.scss';
+import styles from './SidebarSkeleton.module.scss';
+
+const TagContentSkeleton = (): JSX.Element => {
+
+  return (
+    <div className={`p-3 grw-custom-sidebar-content ${customSidebarStyles['grw-custom-sidebar-content']}`}>
+      <Skeleton additionalClass={`${styles['grw-sidebar-skeleton-text-full']} my-3`} />
+      <Skeleton additionalClass={`${styles['grw-sidebar-skeleton-text-full']} my-3`} />
+    </div>
+  );
+};
+
+export default TagContentSkeleton;

packages/app/src/components/Sidebar/Skelton/SidebarHeaderSkelton.module.scss

@@ -1,5 +0,0 @@
-.grw-sidebar-content-header-skelton {
-  max-width: 160px;
-  height: 30px;
-  padding: 7px 0;
-}

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

@@ -10,6 +10,7 @@ import TagCloudBox from '../TagCloudBox';
 import TagList from '../TagList';
 
 import { SidebarHeaderReloadButton } from './SidebarHeaderReloadButton';
+import TagContentSkeleton from './Skeleton/TagContentSkeleton';
 
 
 const PAGING_LIMIT = 10;
@@ -53,9 +54,7 @@ const Tag: FC = () => {
 
       { isLoading
         ? (
-          <div className="text-muted text-center">
-            <i className="fa fa-2x fa-spinner fa-pulse mt-3"></i>
-          </div>
+          <TagContentSkeleton />
         )
         : (
           <div data-testid="grw-tags-list">