From 4968d1ecb3b9e790f0dfe6b2610ff6cc6ab05903 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Tue, 25 Jul 2023 23:44:41 -0700
Subject: [PATCH] fix: :egg: animation

---
 packages/client/src/pages/about.vue | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue
index 296d9194c..05a772f61 100644
--- a/packages/client/src/pages/about.vue
+++ b/packages/client/src/pages/about.vue
@@ -34,11 +34,7 @@
 							<div class="content">
 								<img
 									ref="instanceIcon"
-									:src="
-										$instance.iconUrl ||
-										$instance.faviconUrl ||
-										'/favicon.ico'
-									"
+									:src="iconSrc"
 									aria-label="none"
 									class="icon"
 									:class="instanceIconAnimation"
@@ -211,8 +207,9 @@ withDefaults(
 
 let stats = $ref(null);
 let instanceIcon = $ref<HTMLImageElement>();
-let instanceIconAnimation = "none";
 let iconClicks = 0;
+let iconSrc = ref(instance.iconUrl || instance.faviconUrl || "/favicon.ico");
+let instanceIconAnimation = ref("");
 let tabs = ["overview", "emojis", "charts"];
 let tab = $ref(tabs[0]);
 watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
@@ -274,15 +271,26 @@ function easterEgg() {
 		defaultStore.set("woozyMode", defaultStore.state.woozyMode);
 		if (instanceIcon) {
 			if (iconClicks % 6 === 0) {
-				instanceIcon.src =
+				iconSrc.value =
 					instance.iconUrl || instance.faviconUrl || "/favicon.ico";
 			} else {
-				instanceIcon.src = "/static-assets/woozy.png";
+				iconSrc.value = "/static-assets/woozy.png";
 			}
+			instanceIcon.src = iconSrc.value;
 		}
 	}
 }
 
+watch(iconSrc, (newValue, oldValue) => {
+	if (newValue !== oldValue) {
+		instanceIconAnimation.value = "spin";
+
+		setTimeout(() => {
+			instanceIconAnimation.value = "";
+		}, 1000);
+	}
+});
+
 let swiperRef = null;
 
 function setSwiperRef(swiper) {
@@ -314,7 +322,10 @@ function syncSlide(index) {
 			display: block;
 			margin: 16px auto 0 auto;
 			height: 64px;
-			transition: spinY 1s;
+		}
+
+		> .spin {
+			animation: spinY 1s linear infinite;
 		}
 
 		> .name {