diff --git a/src/components/pages/uniformity/skeleton/UniformityBarChartSkeleton.tsx b/src/components/pages/uniformity/skeleton/UniformityBarChartSkeleton.tsx
index d0a950b5..4cf706f7 100644
--- a/src/components/pages/uniformity/skeleton/UniformityBarChartSkeleton.tsx
+++ b/src/components/pages/uniformity/skeleton/UniformityBarChartSkeleton.tsx
@@ -4,7 +4,7 @@ import { Icon } from '@iconify/react';
 const LeftLegend = () => {
   return (
     <>
-      <div className='w-4 h-30 bg-gray-200 rounded animate-pulse flex items-center justify-center self-center mb-10' />
+      <div className='skeleton h-30 w-4 flex items-center justify-center self-center mb-10' />
 
       <div className='grid grid-cols-1 justify-center items-center'>
         {[...Array(5)].map((_, index) => (
@@ -12,7 +12,7 @@ const LeftLegend = () => {
             key={`grid-${index}`}
             className='shrink-0 flex flex-col justify-center mb-10'
           >
-            <div className='h-4 w-8 bg-gray-200 rounded animate-pulse' />
+            <div className='skeleton h-4 w-8' />
           </div>
         ))}
       </div>
@@ -49,14 +49,13 @@ const ChartArea = () => {
             {ranges.map((range) => (
               <div
                 key={range}
-                className='h-3 w-8 sm:w-12 md:w-16 bg-gray-200 rounded animate-pulse shrink-0'
-                style={{ animationDelay: '0.5s' }}
+                className='skeleton h-3 w-8 sm:w-12 md:w-16 shrink-0'
               />
             ))}
           </div>
 
           <div className='flex justify-center pb-1'>
-            <div className='h-3 w-20 sm:w-28 bg-gray-200 rounded animate-pulse' />
+            <div className='skeleton h-3 w-20 sm:w-28' />
           </div>
         </div>
       </div>