adds next track short animation

frontend/src/app/lobby/page.tsx

@@ -9,6 +9,7 @@ import { useSession } from "muzak/contexts/SessionContext";
 import { getUser, api, Track } from "muzak/data/fetcher";
 import getSessionId from "muzak/data/session";
 import { useSpotifyIframe } from "muzak/contexts/SpotifyIframe";
+import { useAnimation } from "muzak/contexts/AnimationContext";
 
 const nunito = Nunito({
   weight: "900",
@@ -35,6 +36,7 @@ export default function Lobby() {
   const [playingPercentage, setPlayingPercentage] = useState(0);
   const [secondsLeft, setSecondsLeft] = useState(30);
   const [state, setState] = useState("lobby"); // lobby, playing, waiting, loading
+  const { isAnimate, setIsAnimate } = useAnimation();
 
   // Main message handler and dispatcher
   function onMessage(e) {
@@ -44,6 +46,8 @@ export default function Lobby() {
       if (key === "joined") {
         addUser(data[key]);
       } else if (key == "track") {
+        setIsAnimate(false);
+        setTimeout(() => setIsAnimate(true), 1000);
         getTrack();
       } else if (key == "voted") {
         voteUser(data[key]);