fix: excessive cpu usage from avatar loading indicator (#1609)

* fix: only display spinner icon if loading is true * fix: styling and add changeset * chore: tweak changelog --------- Co-authored-by: Daniel Sinclair <d@niel.nyc>
rainbow-me · Nov 16, 2023 · 39d81e9 · 39d81e9 · vercel · Nov 16, 2023
1 parent bd694e8
commit 39d81e9
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/.changeset/tasty-humans-cheer.md b/.changeset/tasty-humans-cheer.md
@@ -0,0 +1,5 @@
+---
+"@rainbow-me/rainbowkit": patch
+---
+
+Fixed a bug where the avatar loading indicator had used excessive CPU cycles
diff --git a/packages/rainbowkit/src/components/Avatar/Avatar.tsx b/packages/rainbowkit/src/components/Avatar/Avatar.tsx
@@ -45,17 +45,12 @@ export function Avatar({ address, imageUrl, loading, size }: AvatarProps) {
       >
         <AvatarComponent address={address} ensImage={imageUrl} size={size} />
       </Box>
-      {typeof loading === 'boolean' && (
+      {loading && (
         <Box
           color="accentColor"
           display="flex"
           height="full"
           position="absolute"
-          style={{
-            opacity: loading ? 1 : 0,
-            transition: loading ? '0.6s ease' : '0.2s ease',
-            transitionDelay: loading ? '.05s' : undefined,
-          }}
           width="full"
         >
           <SpinnerIcon height="100%" width="100%" />