fix: implement loader class from config (#489)

emilkowalski · Nov 2, 2024 · cb8354d · cb8354d
1 parent 07286fe
commit cb8354d
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/assets.tsx b/src/assets.tsx
@@ -23,9 +23,9 @@ export const getAsset = (type: ToastTypes): JSX.Element | null => {
 
 const bars = Array(12).fill(0);
 
-export const Loader = ({ visible }: { visible: boolean }) => {
+export const Loader = ({ visible, className }: { visible: boolean, className?: string }) => {
   return (
-    <div className="sonner-loading-wrapper" data-visible={visible}>
+    <div className={['sonner-loading-wrapper', className].filter(Boolean).join(' ')} data-visible={visible}>
       <div className="sonner-spinner">
         {bars.map((_, i) => (
           <div className="sonner-loading-bar" key={`spinner-bar-${i}`} />

diff --git a/src/index.tsx b/src/index.tsx
@@ -233,20 +233,20 @@ const Toast = (props: ToastProps) => {
   function getLoadingIcon() {
     if (icons?.loading) {
       return (
-        <div className="sonner-loader" data-visible={toastType === 'loading'}>
+        <div className={cn(classNames?.loader, toast?.classNames?.loader, "sonner-loader")} data-visible={toastType === 'loading'}>
           {icons.loading}
         </div>
       );
     }
 
     if (loadingIconProp) {
       return (
-        <div className="sonner-loader" data-visible={toastType === 'loading'}>
+        <div className={cn(classNames?.loader, toast?.classNames?.loader, "sonner-loader")} data-visible={toastType === 'loading'}>
           {loadingIconProp}
         </div>
       );
     }
-    return <Loader visible={toastType === 'loading'} />;
+    return <Loader className={cn(classNames?.loader, toast?.classNames?.loader)} visible={toastType === 'loading'} />;
   }
 
   return (