fix loader component

src/components/Loader/Loader.stories.tsx

@@ -9,24 +9,11 @@ const meta: Meta<typeof Loader> = {
     controls: { expanded: true },
   },
   argTypes: {
-    type: {
-      control: {
-        control: { type: 'radio' },
-        options: ['default', 'raccord'],
-      },
-      description: 'Type of the loader',
-      defaultValue: 'default',
-    },
     size: {
       control: 'number',
       description: 'Size of the loader',
       defaultValue: 24,
     },
-    customClass: {
-      control: 'text',
-      description: 'Additional custom CSS classes for styling',
-      defaultValue: '',
-    },
   },
 };
 
@@ -37,8 +24,6 @@ type Story = StoryObj<typeof Loader>;
 export const _Loader: Story = {
   render: (args) => <Loader {...args} />,
   args: {
-    type: 'default',
     size: 24,
-    customClass: '',
   },
 };

src/components/Loader/Loader.test.tsx

@@ -12,14 +12,3 @@ describe('Components | loader', () => {
     expect(loader).toBeTruthy();
   });
 });
-
-// loader with type secondary
-describe('Components | loader', () => {
-  test('it should render', () => {
-    render(<Loader type="raccord" />);
-
-    let loader = screen.getByTestId('loader');
-
-    expect(loader).toBeTruthy();
-  });
-});

src/components/Loader/Loader.tsx

@@ -1,32 +1,28 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import React, { ComponentPropsWithoutRef } from 'react';
+import React, { forwardRef } from 'react';
 
 import { LoaderCircle } from 'lucide-react';
 
-import Logo from '../../assets/images/loading.gif';
+import { cn } from '../../lib/utils';
 
-const TypeLoader = {
-  default: 'default',
-  raccord: 'raccord',
-};
-
-interface LoaderProps extends ComponentPropsWithoutRef<'div'> {
-  customClass?: string;
+interface LoaderProps extends React.HTMLAttributes<SVGSVGElement> {
   size?: number;
-  type?: keyof typeof TypeLoader;
 }
 
-export function Loader(props: LoaderProps) {
-  const { size = 24, customClass = '', type = 'default', ...rest } = props;
+const Loader = forwardRef<SVGSVGElement, LoaderProps>((props, ref) => {
+  const { size = 24, className, ...rest } = props;
 
   return (
-    <div data-testid="loader" className={customClass} {...rest}>
-      {type === 'default' ? (
-        <LoaderCircle size={size} className="animate-spin text-primary" />
-      ) : (
-        <img src={Logo} alt="loading" width={size} height={size} />
-      )}
-    </div>
+    <LoaderCircle
+      ref={ref}
+      data-testid="loader"
+      strokeWidth={2}
+      size={size}
+      className={cn('animate-spin text-primary', className)}
+      {...rest}
+    />
   );
-}
+});
+
+Loader.displayName = 'Loader';
+
+export { Loader };