From 5714cfb2e4c22495a7ed1d3e02710f877514f258 Mon Sep 17 00:00:00 2001
From: LukaTheHero <canakpa@gmail.com>
Date: Mon, 29 Jun 2026 22:33:53 -0400
Subject: [PATCH] fix(ui): replace Dottore jumping-jacks loading gif with a
 normal spinner

Swap the `/sprites/dottore/dottore_jumping.gif` loading animation for a standard
Loader2 spinner in both places it appeared: the "Prof Mari is working..."
indicator (ProfessorMariWorkingWindow) and the "DJ Mari is composing a playlist"
toast (SpotifyMiniPlayer). Also drops the now-unused gif constant, the
image-failure fallback state, and the unused React hook imports from the working
window. The gif asset file itself is left in place (now unused).
---
 .../components/spotify/SpotifyMiniPlayer.tsx  |  8 +------
 .../ui/ProfessorMariWorkingWindow.tsx         | 22 ++-----------------
 2 files changed, 3 insertions(+), 27 deletions(-)

diff --git a/packages/client/src/components/spotify/SpotifyMiniPlayer.tsx b/packages/client/src/components/spotify/SpotifyMiniPlayer.tsx
index eb13163484..eee44c4954 100644
--- a/packages/client/src/components/spotify/SpotifyMiniPlayer.tsx
+++ b/packages/client/src/components/spotify/SpotifyMiniPlayer.tsx
@@ -153,7 +153,6 @@ const REPEAT_TRACK_END_GRACE_MS = 15_000;
 const REPEAT_TRACK_REPLAY_COOLDOWN_MS = 8_000;
 const MANUAL_CONTROL_REPEAT_SUPPRESS_MS = 15_000;
 const DJ_MARI_PLAYLIST_READY_TOAST_MS = 20_000;
-const DOTTOR_SUPPORT_GIF = "/sprites/dottore/dottore_jumping.gif";
 const MOBILE_WIDGET_COLLAPSED_SIZE = 48;
 const MOBILE_WIDGET_EXPANDED_MAX_WIDTH = 320;
 const MOBILE_WIDGET_EXPANDED_HORIZONTAL_GUTTER = 24;
@@ -554,12 +553,7 @@ export function SpotifyMiniPlayer({
     djMariToastRef.current = toast.custom(
       () => (
         <div className="flex max-w-[22rem] items-center gap-3 pr-1 text-[var(--foreground)]">
-          <img
-            src={DOTTOR_SUPPORT_GIF}
-            alt=""
-            className="h-14 w-14 shrink-0 rounded-lg object-contain"
-            draggable={false}
-          />
+          <Loader2 size="2rem" className="shrink-0 animate-spin text-[var(--muted-foreground)]" />
           <p className="text-sm font-medium leading-snug">DJ Mari is composing a playlist for you, hold on tight!</p>
           <button
             type="button"
diff --git a/packages/client/src/components/ui/ProfessorMariWorkingWindow.tsx b/packages/client/src/components/ui/ProfessorMariWorkingWindow.tsx
index 1b06b31667..553f982d26 100644
--- a/packages/client/src/components/ui/ProfessorMariWorkingWindow.tsx
+++ b/packages/client/src/components/ui/ProfessorMariWorkingWindow.tsx
@@ -1,9 +1,6 @@
-import { useEffect, useState } from "react";
-import { X } from "lucide-react";
+import { Loader2, X } from "lucide-react";
 import { cn } from "../../lib/utils";
 
-const DOTTOR_SUPPORT_GIF = "/sprites/dottore/dottore_jumping.gif";
-
 interface ProfessorMariWorkingWindowProps {
   visible: boolean;
   onDismiss?: () => void;
@@ -11,14 +8,6 @@ interface ProfessorMariWorkingWindowProps {
 }
 
 export function ProfessorMariWorkingWindow({ visible, onDismiss, className }: ProfessorMariWorkingWindowProps) {
-  const [imageFailed, setImageFailed] = useState(false);
-
-  useEffect(() => {
-    if (visible) {
-      setImageFailed(false);
-    }
-  }, [visible]);
-
   if (!visible) return null;
 
   return (
@@ -30,14 +19,7 @@ export function ProfessorMariWorkingWindow({ visible, onDismiss, className }: Pr
       role="status"
       aria-live="polite"
     >
-      {!imageFailed && (
-        <img
-          src={DOTTOR_SUPPORT_GIF}
-          alt=""
-          className="h-10 w-10 shrink-0 object-contain [image-rendering:pixelated]"
-          onError={() => setImageFailed(true)}
-        />
-      )}
+      <Loader2 size="1.5rem" className="shrink-0 animate-spin text-[var(--muted-foreground)]" />
       <p className={cn("min-w-0 text-xs font-medium leading-relaxed text-[var(--foreground)]", onDismiss && "pr-6")}>
         Prof Mari is working...
       </p>