From 594cbdeb81a8b4dbaa479f6a84d1cb888a0d3c08 Mon Sep 17 00:00:00 2001
From: gsaw01 <glib.sawchenko@gmail.com>
Date: Sat, 18 Jan 2025 17:39:10 +0100
Subject: [PATCH] fixed the problem of flashing small box on page load

---
 index.html               | 2 +-
 public/style.css         | 9 +++++++++
 src/pages/welcomePage.js | 1 +
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 9a053f5..6dbb705 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
     <!-- Put your HTML here -->
 
     <div class="wrapper">
-      <div id="user-interface" class="centered"></div>
+      <div id="user-interface" class="centered hidden"></div>
     </div>
 
     <!-- your data -->
diff --git a/public/style.css b/public/style.css
index 987aca2..57e1558 100644
--- a/public/style.css
+++ b/public/style.css
@@ -413,3 +413,12 @@ input[type='text'] {
     grid-column: 1;
   }
 }
+
+.hidden {
+  opacity: 0;
+}
+
+#user-interface.loaded {
+  opacity: 1;
+  transition: opacity 0.03s ease;
+}
diff --git a/src/pages/welcomePage.js b/src/pages/welcomePage.js
index 07a283c..4b49da5 100644
--- a/src/pages/welcomePage.js
+++ b/src/pages/welcomePage.js
@@ -11,6 +11,7 @@ import { initTimer } from '../utilities/timerPage.js';
 
 export const initWelcomePage = () => {
   const userInterface = document.getElementById(USER_INTERFACE_ID);
+  userInterface.classList.add('loaded');
   userInterface.innerHTML = '';
 
   const welcomeElement = createWelcomeElement();