enable recent changes content skeleton

apps/app/src/components/Sidebar/RecentChanges/RecentChangesContentSkeleton.tsx

@@ -4,35 +4,34 @@ import { Skeleton } from '~/components/Skeleton';
 
 import styles from './RecentChangesSubstance.module.scss';
 
-// TODO: enable skeltonItem https://redmine.weseek.co.jp/issues/128495
-// const SkeletonItem = () => {
-
-//   const isSmall = window.localStorage.isRecentChangesSidebarSmall === 'true';
-
-//   return (
-//     <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={`grw-recent-changes-skeleton-small ${styles['grw-recent-changes-skeleton-small']}`} />
-//           <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>
-//     </li>
-//   );
-// };
+const SkeletonItem = () => {
+
+  const isSmall = window.localStorage.isRecentChangesSidebarSmall === 'true';
+
+  return (
+    <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={`grw-recent-changes-skeleton-small ${styles['grw-recent-changes-skeleton-small']}`} />
+          <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>
+    </li>
+  );
+};
 
 const RecentChangesContentSkeleton = (): JSX.Element => {
 
   return (
     <div className="grw-recent-changes py-3">
       <ul className="list-group list-group-flush">
-        {/* <SkeletonItem />
         <SkeletonItem />
-        <SkeletonItem /> */}
+        <SkeletonItem />
+        <SkeletonItem />
         <li className={'list-group-item p-0'}></li>
       </ul>
     </div>);