fix: fouc on ChainIcon (#287)

family · Aug 14, 2023 · 4798404 · 4798404 · vercel · Aug 14, 2023
1 parent e2a9d2d
commit 4798404
Showing 1 changed file with 13 additions and 6 deletions.
diff --git a/packages/connectkit/src/components/Common/Chain/index.tsx b/packages/connectkit/src/components/Common/Chain/index.tsx
@@ -9,6 +9,7 @@ import {
 import { AnimatePresence } from 'framer-motion';
 import supportedChains from '../../../constants/supportedChains';
 import Chains from '../../../assets/chains';
+import useIsMounted from '../../../hooks/useIsMounted';
 
 const Spinner = (
   <svg
@@ -54,13 +55,19 @@ const Chain: React.FC<{
   unsupported?: boolean;
   radius?: number | string;
   size?: number | string;
-}> = ({
-  id,
-  unsupported,
-  radius = '50%',
-  size = 24
-}) => {
+}> = ({ id, unsupported, radius = '50%', size = 24 }) => {
   const chain = supportedChains.find((c) => c.id === id);
+  const isMounted = useIsMounted();
+  if (!isMounted)
+    return (
+      <div
+        style={{
+          width: size,
+          height: size,
+        }}
+      />
+    );
+
   return (
     <ChainContainer size={size} radius={radius}>
       <AnimatePresence initial={false}>