RecentChanges Skeleton for dual size

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

@@ -1,3 +1,5 @@
+@use './Skeleton/SidebarSkeleton.module.scss' as *;
+
 .grw-recent-changes-resize-button :global {
   font-size: 12px;
   line-height: normal;
@@ -15,6 +17,20 @@
 }
 
 .list-group-item :global {
+  .grw-recent-changes-skeleton-text {
+    @include grw-skeleton-text(120px);
+  }
+
+  .grw-recent-changes-skeleton-h5 {
+    @include grw-skeleton-h5;
+    max-width: 120px;
+  }
+
+  .grw-recent-changes-skeleton-date {
+    width: 90px;
+    height: 13.5;
+  }
+
   .grw-recent-changes-item-lower {
     height: 17.5px;
   }

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

@@ -2,21 +2,21 @@ import React from 'react';
 
 import { Skeleton } from '~/components/Skeleton';
 
-import recentChangesStyles from '../RecentChanges.module.scss';
-import styles from './SidebarSkeleton.module.scss';
+import styles from '../RecentChanges.module.scss';
 
 const SkeletonItem = () => {
 
+  const isSmall = window.localStorage.isRecentChangesSidebarSmall === 'true';
+
   return (
-    <li className={`list-group-item ${recentChangesStyles['list-group-item']} py-3 px-0`}>
+    <li className={`list-group-item ${styles['list-group-item']} ${isSmall ? 'py-2' : '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']} />
+          <Skeleton additionalClass={`grw-recent-changes-skeleton-text ${styles['grw-recent-changes-skeleton-text']} ${isSmall && 'pb-1'}`} />
+          <Skeleton additionalClass={`grw-recent-changes-skeleton-h5 ${styles['grw-recent-changes-skeleton-h5']} ${isSmall ? 'my-0' : 'my-2'}`} />
+          <div className="d-flex justify-content-end grw-recent-changes-item-lower pt-1">
+            <Skeleton additionalClass={`grw-recent-changes-skeleton-date ${styles['grw-recent-changes-skeleton-date']}`} />
           </div>
         </div>
       </div>

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

@@ -7,33 +7,24 @@ $h5-line-height: 18px;
   padding: (($h3-line-height - 16px) / 2) 0;
 }
 
-@mixin grw-sidebar-skeleton-text($width) {
+@mixin grw-skeleton-text($width) {
   max-width: $width;
   height: 1rem;
 }
 
-.grw-sidebar-skeleton-text-medium {
-  @include grw-sidebar-skeleton-text(120px);
-}
-
-.grw-sidebar-skeleton-text-full {
-  @include grw-sidebar-skeleton-text(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;
+@mixin grw-skeleton-h5 {
   height: $h5-line-height;
   padding: (($h5-line-height - 16px) / 2) 0;
 }
 
-.grw-sidebar-skeleton-recent-changes-icons {
-  width: 80px;
-  height: 1rem;
+.grw-sidebar-skeleton-text-full {
+  @include grw-skeleton-text(100%);
 }