add loaders

components/Top-Level/blog-card/BlogCard.tsx

@@ -17,7 +17,7 @@ const BlogCard: React.FC<blogcardprops> = ({ img, title, description, id,handleC
         dark:*:text-white group h-full" onClick={handleClick}>
   {
     img &&   
-    <Image src={img} width={900} height={900} alt="" className="w-full h-[220px] rounded-t-lg object-cover" />
+        <Image src={img} width={900} height={900} alt="" className="w-full h-[220px] rounded-t-lg object-cover" loading="lazy" />
   }
   <div className="h-[calc(100%-220px)] p-[1em] sm:p-[1.5em] bg-white flex flex-col dark:bg-[#131617] ">
     <h4 className="text-sans font-[700] group-hover:text-primary text-sm sm:text-[18px] my-[.3em] leading-[1.4em] md:line-clamp-2">

components/base/Button/Button.tsx

@@ -16,7 +16,7 @@ export default function Button({ children, size, disabled, className, loading, h
         'px-4 py-2 text-[18px]': size === 'sm',
         'px-6 py-2 text-[22px]': size === 'md',
         'px-4 py-2 text-[15px]':size ==='icon',
-        'bg-secondary hover:bg-none  dark:hover:bg-black dark:bg-black': disabled,
+        'bg-secondary hover:bg-none  hover:dark:bg-black dark:bg-black': disabled,
      'hover:bg-primary hover:text-white ease-in duration-100': !disabled,
      'w-full': block,
      'bg-white dark:bg-[#131617] dark:text-white':!isPrimary,

components/base/loader/Loader.tsx

 const Loader = () => {
-    return (<div className="w-32 h-32 border-6 p-[50px]  border-b-white dark:border-b-black dark:border-white border-black animate-spin"></div>
+    return (<div className="w-32 h-32 border-[20px] p-[50px]  border-b-white dark:border-b-black dark:border-white border-black animate-spin rounded-full"></div>
         );
 }
  

components/base/loader/loader.stories.tsx

+import { StoryObj, Meta } from "@storybook/react";
+import Loader from "./Loader";
+
+const meta: Meta<typeof Loader> = {
+    title: 'Base/Loader',
+    component: Loader
+}
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// export const Loader_story: Story = {
+//     render: (args) => {
+//         return (<div className="h-full dark:bg-black flex justify-center p-4">
+//             <Loader {...args} />
+//         </div>)
+//     },
+//     args: {
+//     }
+// }
\ No newline at end of file

next.config.js

@@ -29,7 +29,6 @@ module.exports = {
       {
         source: '/api/:path*',
         destination: `${process.env.NEXT_PUBLIC_API_URL}/api/:path*`,
-        
       }
     ];
   },

pages/Home.tsx

@@ -23,7 +23,9 @@ const Home = () => {
                     <Heading /> 
             <div className="flex flex-wrap gap-6 w-full dark:bg-black mt-4">
                 {
-                    isLoading && <Loader />
+                    isLoading && <div className="w-full h-full dark:bg-black flex justify-center p-4">
+                        <Loader  />
+                    </div>
                 }
                 {
                     !isLoading && data?.length === 0 && <h2 className=" capitalize dark:text-white text-center w-full text-2xl font-semibold py-5">no Data found</h2>