From 92734e795b2a2a8394bc1309aa31685311e60123 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Sat, 30 Mar 2024 17:53:47 +0200
Subject: [PATCH] Added loader for icon fallback

---
 src/frontend/src/components/genericIconComponent/index.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/components/genericIconComponent/index.tsx b/src/frontend/src/components/genericIconComponent/index.tsx
index 9c3ea4402..1fce0525c 100644
--- a/src/frontend/src/components/genericIconComponent/index.tsx
+++ b/src/frontend/src/components/genericIconComponent/index.tsx
@@ -2,6 +2,8 @@ import dynamicIconImports from "lucide-react/dynamicIconImports";
 import { Suspense, forwardRef, lazy, memo } from "react";
 import { IconComponentProps } from "../../types/components";
 import { nodeIconsLucide } from "../../utils/styleUtils";
+import { cn } from "../../utils/utils";
+import Loading from "../ui/loading";
 
 const ForwardedIconComponent = memo(
   forwardRef(
@@ -34,7 +36,9 @@ const ForwardedIconComponent = memo(
         return null; // Render nothing until the icon is loaded
       }
       const fallback = (
-        <div style={{ background: "#ddd", width: 24, height: 24 }} />
+        <div className={cn(className, "flex items-center justify-center")}>
+          <Loading />
+        </div>
       );
       return (
         <Suspense fallback={fallback}>