Fix custom svg placeholder for SSR

mondaycom · Oct 10, 2024 · 27220e1 · 27220e1
1 parent 8b5834a
commit 27220e1
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/packages/core/src/components/Icon/CustomSvgIcon/CustomSvgIcon.tsx b/packages/core/src/components/Icon/CustomSvgIcon/CustomSvgIcon.tsx
@@ -58,21 +58,26 @@ const CustomSvgIcon: FunctionComponent<CustomSvgIconProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const SVGComponent = SVG as React.FC<any>;
 
+  const PlaceHolder = <div className={className} id={id}></div>;
+
   if (!isMounted) {
     // placeholder for server side rendering
-    return <div className={className} id={id}></div>;
+    return PlaceHolder;
   }
   return (
     <SVGComponent
       innerRef={ref}
       {...screenReaderAccessProps}
       onClick={onClick}
+      loader={PlaceHolder}
       src={src}
       className={className}
       preProcessor={svgProcessor}
       id={id}
       data-testid={dataTestId || getTestId(ComponentDefaultTestId.SVG_ICON, id)}
-    />
+    >
+      {PlaceHolder}
+    </SVGComponent>
   );
 };