From 92150cf86c5e4a00cac27d812f929b8649ba8bf8 Mon Sep 17 00:00:00 2001
From: Mahyar Khanbolooki <mahyarkhn@proton.me>
Date: Thu, 21 Aug 2025 22:10:01 +0330
Subject: [PATCH] fix: force the smart icon for client side loading to prevent
 potential issues

---
 src/components/utils/SmartIcon.tsx | 69 ++++++++++++++++--------------
 1 file changed, 38 insertions(+), 31 deletions(-)

diff --git a/src/components/utils/SmartIcon.tsx b/src/components/utils/SmartIcon.tsx
index 1364c38..941686d 100644
--- a/src/components/utils/SmartIcon.tsx
+++ b/src/components/utils/SmartIcon.tsx
@@ -1,25 +1,22 @@
-'use client';
+'use client'
 
-import React from "react";
-import * as Iconsax from "iconsax-react";
-import { SmartIconType } from "@/types/iconType";
+import React, { Suspense, lazy, ComponentType } from 'react'
+import { SmartIconType } from '@/types/iconType'
 
 type IconsaxIconProps = {
-  size?: number;
-  color?: string;
-  className?: string;
-  variant?: string;
-};
-
-type IconComponentType = React.FC<IconsaxIconProps>;
+  size?: number
+  color?: string
+  className?: string
+  variant?: string
+}
 
 export interface SmartIconProps {
-  icon?: SmartIconType;
-  name?: string;
-  size?: number;
-  color?: string;
-  className?: string;
-  variant?: string;
+  icon?: SmartIconType
+  name?: string
+  size?: number
+  color?: string
+  className?: string
+  variant?: string
 }
 
 export const SmartIcon: React.FC<SmartIconProps> = ({
@@ -28,22 +25,32 @@ export const SmartIcon: React.FC<SmartIconProps> = ({
   size,
   color,
   className,
-  variant,
+  variant
 }) => {
-  const iconName = (icon?.Name || name || "").charAt(0).toUpperCase() + (icon?.Name || name || "").slice(1);
+  const iconName =
+    (icon?.Name || name || '').charAt(0).toUpperCase() +
+    (icon?.Name || name || '').slice(1)
 
-  if (!iconName) return null;
+  if (!iconName) return null
 
-  const IconComponent = Iconsax[iconName as keyof typeof Iconsax] as IconComponentType | undefined;
-
-  if (!IconComponent) return null;
+  // Lazy-load icon dynamically with proper type cast
+  const IconComponent = lazy(() =>
+    import('iconsax-react').then(module => {
+      const Component = module[
+        iconName as keyof typeof module
+      ] as ComponentType<IconsaxIconProps>
+      return { default: Component }
+    })
+  )
 
   return (
-    <IconComponent
-      variant={icon?.Variant ?? variant ?? 'lineat'}
-      size={icon?.Size ?? size ?? 20}
-      color={icon?.Color ?? color ?? "currentColor"}
-      className={icon?.ClassName ?? className}
-    />
-  );
-};
+    <Suspense fallback={null}>
+      <IconComponent
+        variant={icon?.Variant ?? variant ?? 'linear'}
+        size={icon?.Size ?? size ?? 20}
+        color={icon?.Color ?? color ?? 'currentColor'}
+        className={icon?.ClassName ?? className}
+      />
+    </Suspense>
+  )
+}