refactor: Use useId instead of manually generating keys for loading s…

…keletons
hackerspace-ntnu · Sep 22, 2024 · f1a904e · f1a904e
1 parent 4b84038
commit f1a904e
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 12 deletions.
diff --git a/src/components/layout/PaginationCarouselSkeleton.tsx b/src/components/layout/PaginationCarouselSkeleton.tsx
@@ -7,6 +7,8 @@ import {
   PaginationPrevious,
 } from '@/components/ui/Pagination';
 import { useTranslations } from 'next-intl';
+import { useId } from 'react';
+
 type PaginationCarouselSkeletonProps = {
   className?: string;
 };
@@ -28,10 +30,10 @@ function PaginationCarouselSkeleton({
             tabIndex={-1}
           />
         </PaginationItem>
-        {Array.from({ length: 4 }).map((_, index) => (
+        {Array.from({ length: 4 }).map(() => (
           <PaginationItem
             className='cursor-not-allowed opacity-50'
-            key={`Item ${index + 1}`}
+            key={useId()}
           >
             <PaginationEllipsis morePages='' />
           </PaginationItem>

diff --git a/src/components/news/CardGridSkeleton.tsx b/src/components/news/CardGridSkeleton.tsx
@@ -13,7 +13,7 @@ function CardGridSkeleton() {
             index === 1 && 'col-span-1 row-span-1 md:col-span-2',
             index === 3 && 'xs:col-span-2 row-span-1 md:col-span-1',
           )}
-          key={`Grid ${index + 1}`}
+          key={React.useId()}
         />
       ))}
     </div>

diff --git a/src/components/news/ItemGridSkeleton.tsx b/src/components/news/ItemGridSkeleton.tsx
@@ -4,8 +4,8 @@ import * as React from 'react';
 function ItemGridSkeleton() {
   return (
     <div className='grid min-h-[752px] grid-cols-1 gap-4 sm:min-h-[368px] sm:grid-cols-2 lg:min-h-[240px] lg:grid-cols-3'>
-      {Array.from({ length: 6 }).map((_, index) => (
-        <ArticleItemSkeleton key={`Item ${index + 1}`} />
+      {Array.from({ length: 6 }).map(() => (
+        <ArticleItemSkeleton key={React.useId()} />
       ))}
     </div>
   );

diff --git a/src/components/storage/ShoppingCartTableSkeleton.tsx b/src/components/storage/ShoppingCartTableSkeleton.tsx
@@ -1,19 +1,17 @@
 import { Skeleton } from '@/components/ui/Skeleton';
+import { useId } from 'react';
 
 export default function ShoppingCartTableSkeleton() {
   return (
     <>
       <div className='mt-4 grid grid-cols-10 gap-2'>
-        {Array.from({ length: 4 }).map((_, index) => (
-          <Skeleton className='col-span-1 h-5' key={`s_1_${index + 1}`} />
+        {Array.from({ length: 4 }).map(() => (
+          <Skeleton className='col-span-1 h-5' key={useId()} />
         ))}
       </div>
-      {Array.from({ length: 4 }).map((_, index) => {
+      {Array.from({ length: 4 }).map(() => {
         return (
-          <div
-            key={`s_2_${index + 1}`}
-            className='my-4 grid grid-cols-10 gap-2'
-          >
+          <div key={useId()} className='my-4 grid grid-cols-10 gap-2'>
             <Skeleton className='col-span-1 h-10' />
             <Skeleton className='col-span-3 h-10' />
             <Skeleton className='col-span-5 h-10' />