From e4c1089b46b7755a3e9e75a9048327ecca654724 Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date: Mon, 24 Apr 2023 06:43:21 -0700
Subject: [PATCH] Add generating animation and fix robot corrupted robot garage
 load

---
 frontend/src/components/RobotAvatar/index.tsx |  2 +
 frontend/src/models/Garage.model.ts           |  1 -
 frontend/static/css/index.css                 | 43 +++++++++++++++++--
 3 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/RobotAvatar/index.tsx b/frontend/src/components/RobotAvatar/index.tsx
index 7a4e9f0f..c30c8f39 100644
--- a/frontend/src/components/RobotAvatar/index.tsx
+++ b/frontend/src/components/RobotAvatar/index.tsx
@@ -50,6 +50,8 @@ const RobotAvatar: React.FC<Props> = ({
       ? theme.palette.mode === 'dark'
         ? 'loadingAvatarDark'
         : 'loadingAvatar'
+      : theme.palette.mode === 'dark'
+      ? 'generatingAvatarDark'
       : 'generatingAvatar';
 
   useEffect(() => {
diff --git a/frontend/src/models/Garage.model.ts b/frontend/src/models/Garage.model.ts
index 228e0ed4..c377690e 100644
--- a/frontend/src/models/Garage.model.ts
+++ b/frontend/src/models/Garage.model.ts
@@ -28,7 +28,6 @@ class Garage {
   delete = () => {
     this.slots = [emptySlot];
     systemClient.deleteItem('garage');
-    this.save();
   };
 
   updateRobot: (robot: Robot, index: number) => void = (robot, index) => {
diff --git a/frontend/static/css/index.css b/frontend/static/css/index.css
index c6cdffc8..b53b7a0e 100644
--- a/frontend/static/css/index.css
+++ b/frontend/static/css/index.css
@@ -176,7 +176,7 @@ input[type='number'] {
   }
 }
 
-@keyframes animatedBackground {
+@keyframes animatedLoadingBackground {
   from {
     background-position: 0 0;
   }
@@ -185,6 +185,15 @@ input[type='number'] {
   }
 }
 
+@keyframes animatedGeneratingBackground {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 0 200px;
+  }
+}
+
 .loadingAvatar {
   background-size: 100%;
   border-radius: 50%;
@@ -199,7 +208,7 @@ input[type='number'] {
   );
   background-position: 0px 0px;
   background-repeat: repeat;
-  animation: animatedBackground 5s linear infinite;
+  animation: animatedLoadingBackground 5s linear infinite;
 }
 
 .loadingAvatarDark {
@@ -216,7 +225,7 @@ input[type='number'] {
   );
   background-position: 0px 0px;
   background-repeat: repeat;
-  animation: animatedBackground 5s linear infinite;
+  animation: animatedLoadingBackground 5s linear infinite;
 }
 
 .generatingAvatar {
@@ -225,4 +234,32 @@ input[type='number'] {
   outline: 2px solid #555;
   outline-offset: -2px;
   filter: dropShadow(1px 1px 1px #000000);
+  background-image: linear-gradient(
+    0deg,
+    #ffffff00 0%,
+    #dbdbdb93 40%,
+    #f7f7f791 60%,
+    #ffffff00 100%
+  );
+  background-position: 0px 0px;
+  background-repeat: repeat;
+  animation: animatedGeneratingBackground 5s linear infinite;
+}
+
+.generatingAvatarDark {
+  background-size: 100%;
+  border-radius: 50%;
+  outline: 2px solid #555;
+  outline-offset: -2px;
+  filter: dropShadow(1px 1px 1px #000000);
+  background-image: linear-gradient(
+    0deg,
+    #6e6e6e00 0%,
+    #14141479 40%,
+    #14141479 60%,
+    #6e6e6e00 100%
+  );
+  background-position: 0px 0px;
+  background-repeat: repeat;
+  animation: animatedGeneratingBackground 5s linear infinite;
 }