feat: add hidden for skeleton

jst-seminar-rostlab-tum · Dec 19, 2024 · 339d815 · 339d815
1 parent ab0ead9
commit 339d815
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 8 deletions.
diff --git a/src/components/ComparisonPortal/ComparisonAccordionSkeleton.tsx b/src/components/ComparisonPortal/ComparisonAccordionSkeleton.tsx
@@ -12,7 +12,7 @@ export default function ComparisonAccordionSkeleton() {
             key={uuid()}
             className="rounded-medium last:border-b-0 bg-content1 white:bg-white overflow-hidden shadow-md"
           >
-            <Skeleton className="rounded-lg bg-content1 dark:bg-content1">
+            <Skeleton aria-hidden="true" className="rounded-lg bg-content1 dark:bg-content1">
               <div className="h-[69px]" />
             </Skeleton>
           </div>

diff --git a/src/components/ComparisonPortal/CountrySelectSkeleton.tsx b/src/components/ComparisonPortal/CountrySelectSkeleton.tsx
@@ -6,7 +6,7 @@ export default function CountrySelectionSkeleton() {
     <div className="pb-4 space-y-6">
       <div className="group flex flex-col w-full">
         <div className="w-full flex flex-col">
-          <Skeleton className="relative px-3 gap-3 w-full shadow-sm h-10 min-h-10 rounded-medium">
+          <Skeleton aria-hidden="true" className="relative px-3 gap-3 w-full shadow-sm h-10 min-h-10 rounded-medium">
             <div className="inline-flex h-full w-[calc(100%_-_theme(spacing.6))] min-h-4 items-center gap-1.5 box-border" />
           </Skeleton>
         </div>

diff --git a/src/components/HungerAlert/HungerAlertSkeleton.tsx b/src/components/HungerAlert/HungerAlertSkeleton.tsx
@@ -4,6 +4,7 @@ export default function HungerAlertSkeleton() {
   return (
     <div className="absolute top-[calc(50dvh+90px)] left-7 z-10 cursor-pointer ">
       <Skeleton
+        aria-hidden="true"
         className="rounded-full flex flex-col items-center justify-center text-center bg-content1 dark:bg-content1 relative p-5"
         style={{ width: '4rem', height: '4rem' }}
       />

diff --git a/src/components/Legend/MapLegendSkeleton.tsx b/src/components/Legend/MapLegendSkeleton.tsx
@@ -6,18 +6,18 @@ export default function MapLegendSkeleton() {
       {/* Desktop version */}
       <div className="hidden sm700:block w-[450px] absolute bottom-3 right-20 z-legend">
         <div className="flex flex-col gap-2 mb-4">
-          <Skeleton className="rounded-lg bg-content1 dark:bg-content1">
+          <Skeleton aria-hidden="true" className="rounded-lg bg-content1 dark:bg-content1">
             <div className="h-[69px]" />
           </Skeleton>
-          <Skeleton className="rounded-lg bg-content1 dark:bg-content1">
+          <Skeleton aria-hidden="true" className="rounded-lg bg-content1 dark:bg-content1">
             <div className="h-[88px]" />
           </Skeleton>
         </div>
       </div>
 
       {/* Mobile version */}
       <div className="sm700:hidden absolute z-legend bottom-0 mb-10 right-16">
-        <Skeleton className="rounded-full bg-content1 dark:bg-content1">
+        <Skeleton aria-hidden="true" className="rounded-full bg-content1 dark:bg-content1">
           <div className="w-10 h-10" />
         </Skeleton>
       </div>

diff --git a/src/components/Map/ZoomControlSkeleton.tsx b/src/components/Map/ZoomControlSkeleton.tsx
@@ -3,7 +3,7 @@ import { Skeleton } from '@nextui-org/skeleton';
 export default function ZoomControlSkeleton() {
   return (
     <div className="absolute right-4 bottom-7">
-      <Skeleton className="bg-content1 dark:bg-content1 rounded-md w-10 h-16" />
+      <Skeleton aria-hidden="true" className="bg-content1 dark:bg-content1 rounded-md w-10 h-16" />
     </div>
   );
 }
diff --git a/src/components/Search/DocsSearchBarSkeleton.tsx b/src/components/Search/DocsSearchBarSkeleton.tsx
@@ -5,7 +5,10 @@ function DocsSearchBarSkeleton() {
   return (
     <div className="h-10">
       <div className="flex w-full fixed left-0 z-10">
-        <Skeleton className="relative w-full inline-flex shadow-sm h-10 rounded-lg max-w-[90%] px-2 sm:max-w-md mx-auto" />
+        <Skeleton
+          aria-hidden="true"
+          className="relative w-full inline-flex shadow-sm h-10 rounded-lg max-w-[90%] px-2 sm:max-w-md mx-auto"
+        />
       </div>
     </div>
   );

diff --git a/src/components/Sidebar/ThemeSwitch.tsx b/src/components/Sidebar/ThemeSwitch.tsx
@@ -24,7 +24,7 @@ export function ThemeSwitch({ isIconOnly = false }: ThemeSwitchProps) {
     return (
       <div className="flex items-center justify-between gap-4 w-full ml-1">
         {!isIconOnly && <small>Theme</small>}
-        <Skeleton className="rounded-full  w-14 h-7" />
+        <Skeleton aria-hidden="true" className="rounded-full  w-14 h-7" />
       </div>
     );