From fa0781bc366ec49dc4ec99a54d1717ebe1c49d47 Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date: Sat, 6 Jan 2024 20:59:57 +0000
Subject: [PATCH] Perf hide animated backgrounds

---
 frontend/src/basic/RobotPage/Onboarding.tsx   | 2 +-
 frontend/src/components/RobotAvatar/index.tsx | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/frontend/src/basic/RobotPage/Onboarding.tsx b/frontend/src/basic/RobotPage/Onboarding.tsx
index 6e11be3c..6d611de6 100644
--- a/frontend/src/basic/RobotPage/Onboarding.tsx
+++ b/frontend/src/basic/RobotPage/Onboarding.tsx
@@ -45,7 +45,7 @@ const Onboarding = ({
   const { t } = useTranslation();
   const navigate = useNavigate();
 
-  const { hostUrl } = useContext<UseAppStoreType>(AppContext);
+  const { setPage } = useContext<UseAppStoreType>(AppContext);
   const { garage } = useContext<UseGarageStoreType>(GarageContext);
 
   const [step, setStep] = useState<'1' | '2' | '3'>('1');
diff --git a/frontend/src/components/RobotAvatar/index.tsx b/frontend/src/components/RobotAvatar/index.tsx
index 32868669..2f31d5ae 100644
--- a/frontend/src/components/RobotAvatar/index.tsx
+++ b/frontend/src/components/RobotAvatar/index.tsx
@@ -89,7 +89,7 @@ const RobotAvatar: React.FC<Props> = ({
     } else {
       setActiveBackground(true);
     }
-  }, [shortAlias]); // TODO: should hashId
+  }, [shortAlias]);
 
   const statusBadge = (
     <div style={{ position: 'relative', left: '0.428em', top: '0.07em' }}>
@@ -115,8 +115,7 @@ const RobotAvatar: React.FC<Props> = ({
             transform: flipHorizontally ? 'scaleX(-1)' : '',
             border: '0.3px solid #55555',
             filter: 'dropShadow(0.5px 0.5px 0.5px #000000)',
-            backgroundImage:
-              activeBackground && placeholderType == 'loading' ? backgroundImage : '',
+            backgroundImage: activeBackground ? backgroundImage : '',
           }}
         >
           <div className={className}>
@@ -147,7 +146,7 @@ const RobotAvatar: React.FC<Props> = ({
         />
       );
     }
-  }, [hashId, shortAlias, avatarSrc, statusColor, tooltip, avatarClass]);
+  }, [hashId, shortAlias, avatarSrc, statusColor, tooltip, avatarClass, activeBackground]);
 
   const getAvatarWithBadges = useCallback(() => {
     let component = avatar;