fix(errors): Fix bug on error UI

static/js/dom-manipulation.js

@@ -25,7 +25,10 @@ const durationTimer = () => {
 
     return {
       cleanup: (completedTask) => {
-        updateDuration(completedTask);
+        if (completedTask) {
+          updateDuration(completedTask);
+        }
+
         clearInterval(incrementSeconds);
         window.removeEventListener('focus', updateDuration);
         elapsedDisplay.textContent = duration.toFixed(1);

static/js/index.js

@@ -22,17 +22,19 @@ const generate = async () => {
     return;
   }
 
-  try {
-    const scene = document.querySelector('.scene');
-    const cardSlot = scene.querySelector('.card-slot');
-    const actions = document.querySelector('.actions');
-    const durationDisplay = actions.querySelector('.duration');
-
-    scene.removeEventListener('mousemove', mousemoveHandlerForPreviousCard, true);
-    cardSlot.innerHTML = '';
-    generating = true;
-    setOutput('booster', 'generating');
+  const scene = document.querySelector('.scene');
+  const cardSlot = scene.querySelector('.card-slot');
+  const actions = document.querySelector('.actions');
+  const durationDisplay = actions.querySelector('.duration');
+  const timer = durationTimer(durationDisplay);
+  const timerCleanup = timer().cleanup;
+
+  scene.removeEventListener('mousemove', mousemoveHandlerForPreviousCard, true);
+  cardSlot.innerHTML = '';
+  generating = true;
+  setOutput('booster', 'generating');
 
+  try {
     const details = await generateDetails();
     pokeName = details.name;
     const task = await createTask(details.energy_type);
@@ -41,8 +43,6 @@ const generate = async () => {
     actions.setAttribute('aria-hidden', 'false');
     actions.querySelectorAll('button').forEach((button) => button.setAttribute('tabindex', '0'));
     durationDisplay.classList.add('displayed');
-    const timer = durationTimer(durationDisplay);
-    const timerCleanup = timer().cleanup;
 
     if (window.innerWidth <= 500) {
       durationDisplay.scrollIntoView({ behavior: 'smooth' });
@@ -76,6 +76,7 @@ const generate = async () => {
     setOutput('card', 'completed');
   } catch (err) {
     generating = false;
+    timerCleanup();
     setOutput('booster', 'failed');
     console.error(err);
   }