fix(name): Fix name width not adjusting on new card

static/js/index.js

@@ -38,7 +38,8 @@ const generate = async () => {
     await new Promise((resolve) => setTimeout(resolve, 2_000));
 
     pulls += 1;
-    const resolvedCardUrl = new URL(`new_card?pull=${pulls}`, document.location.origin + document.location.pathname).href;
+    const resolvedCardUrl = new URL(`new_card?pull=${pulls}`, document.location.origin + document.location.pathname)
+      .href;
     const cardResponse = await fetch(resolvedCardUrl);
     const card = await cardResponse.json();
 
@@ -53,12 +54,17 @@ const generate = async () => {
     );
 
     cardSlot.innerHTML = cardHTML(card.details);
-    updateCardName(trainerName, pokeName, useTrainerName);
     document.querySelector('img.picture').src = card.image;
 
     mousemoveHandlerForPreviousCard = initialiseCardRotation(scene);
 
     setOutput('card', 'completed');
+
+    const updateNameDuringAnimation = setInterval(() => updateCardName(trainerName, pokeName, useTrainerName), 100);
+
+    setTimeout(() => {
+      clearInterval(updateNameDuringAnimation);
+    }, 500);
   } catch (err) {
     generating = false;
     setOutput('booster', 'failed');