From 7fd31dcc7230eb6ab6bb6490c4a26f6ab8813745 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Mon, 6 May 2024 14:04:42 +0200
Subject: [PATCH] fix(bar timer progress): not animating for the first second
 of the test

---
 frontend/src/index.html                |  4 +++-
 frontend/src/ts/test/timer-progress.ts | 19 ++++++++++++-------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/frontend/src/index.html b/frontend/src/index.html
index 6a14fbfd9..396e0bce4 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -17,7 +17,9 @@
       <div class="history"></div>
     </div>
     <div id="barTimerProgress" class="timerMain">
-      <div class="bar" style="opacity: 0"></div>
+      <div class="opacityWrapper" style="opacity: 0">
+        <div class="bar"></div>
+      </div>
     </div>
     <div id="popups">
       <load src="html/popups.html" />
diff --git a/frontend/src/ts/test/timer-progress.ts b/frontend/src/ts/test/timer-progress.ts
index d2f4fe6b9..8889199bd 100644
--- a/frontend/src/ts/test/timer-progress.ts
+++ b/frontend/src/ts/test/timer-progress.ts
@@ -9,17 +9,22 @@ import * as TestState from "./test-state";
 import * as ConfigEvent from "../observables/config-event";
 
 const barEl = $("#barTimerProgress .bar");
+const barOpacityEl = $("#barTimerProgress .opacityWrapper");
 const textEl = $("#liveStatsTextTop .timerProgress");
 const miniEl = $("#liveStatsMini .time");
 
 export function show(): void {
   if (Config.mode !== "zen" && Config.timerStyle === "bar") {
-    barEl.stop(true, true).removeClass("hidden").css("opacity", 0).animate(
-      {
-        opacity: 1,
-      },
-      125
-    );
+    barOpacityEl
+      .stop(true, true)
+      .removeClass("hidden")
+      .css("opacity", 0)
+      .animate(
+        {
+          opacity: 1,
+        },
+        125
+      );
   } else if (Config.timerStyle === "text") {
     textEl.stop(true, true).removeClass("hidden").css("opacity", 0).animate(
       {
@@ -56,7 +61,7 @@ export function reset(): void {
 }
 
 export function hide(): void {
-  barEl.stop(true, true).animate(
+  barOpacityEl.stop(true, true).animate(
     {
       opacity: 0,
     },