adjusted skeleton style of CustomSidebar and Tag

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

@@ -7,7 +7,8 @@
   }
 
   .grw-custom-sidebar-skeleton-text {
-    @include grw-skeleton-text(16px, 16px);
+    @include grw-skeleton-text($font-size:15px, $line-height:21.42px);
     max-width: 100%;
+    margin: 15px 0;
   }
 }

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

@@ -8,8 +8,8 @@ const CustomSidebarContentSkeleton = (): JSX.Element => {
 
   return (
     <div className={`p-3 grw-custom-sidebar-content ${styles['grw-custom-sidebar-content']}`}>
-      <Skeleton additionalClass={`grw-custom-sidebar-skeleton-text ${styles['grw-custom-sidebar-skeleton-text']} mt-3`} />
-      <Skeleton additionalClass={`grw-custom-sidebar-skeleton-text ${styles['grw-custom-sidebar-skeleton-text']} my-4`} />
+      <Skeleton additionalClass={`grw-custom-sidebar-skeleton-text ${styles['grw-custom-sidebar-skeleton-text']}`} />
+      <Skeleton additionalClass={`grw-custom-sidebar-skeleton-text ${styles['grw-custom-sidebar-skeleton-text']}`} />
     </div>
   );
 };

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

@@ -2,16 +2,21 @@ import React from 'react';
 
 import { Skeleton } from '~/components/Skeleton';
 
-import customSidebarStyles from '../CustomSidebar.module.scss';
-import styles from './SidebarSkeleton.module.scss';
+import styles from '../Tag.module.scss';
+
+export const TagListSkeleton = (): JSX.Element => {
+  return (
+    <Skeleton additionalClass={`${styles['grw-tag-list-skeleton']} w-100 rounded overflow-hidden`} />
+  );
+};
 
 const TagContentSkeleton = (): JSX.Element => {
 
   return (
-    <div className="grw-container-convertible">
-      <Skeleton additionalClass={`${styles['grw-sidebar-skeleton-text-full']} my-4`} />
-      <Skeleton additionalClass={`${styles['grw-sidebar-skeleton-text-full']} my-4`} />
-    </div>
+    <>
+      <Skeleton additionalClass={`${styles['grw-tag-skeleton-h3']} my-3`} />
+      <TagListSkeleton />
+    </>
   );
 };
 

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

@@ -0,0 +1,9 @@
+@use '~/styles/mixins' as *;
+
+.grw-tag-skeleton-h3 {
+  @include grw-skeleton-h3;
+}
+
+.grw-tag-list-skeleton {
+  height: 90px;
+}

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

@@ -10,7 +10,7 @@ import TagCloudBox from '../TagCloudBox';
 import TagList from '../TagList';
 
 import { SidebarHeaderReloadButton } from './SidebarHeaderReloadButton';
-import TagContentSkeleton from './Skeleton/TagContentSkeleton';
+import { TagListSkeleton } from './Skeleton/TagContentSkeleton';
 
 
 const PAGING_LIMIT = 10;
@@ -54,7 +54,7 @@ const Tag: FC = () => {
 
       { isLoading
         ? (
-          <TagContentSkeleton />
+          <TagListSkeleton />
         )
         : (
           <div data-testid="grw-tags-list">