feat: add "loading" when loading the overlay

haxgun · Oct 31, 2023 · f65c082 · f65c082
1 parent 74abe15
commit f65c082
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 1 deletion.
diff --git a/overlay/index.html b/overlay/index.html
@@ -8,6 +8,7 @@
     <link rel="icon" type="image/png" href="/img/favicon.png" />
   </head>
   <body>
+    <div style="width: 450px;height: 150px;display: flex;color: white;font-size: 24px;font-weight: 700;justify-content: center;align-items: center;" id="loading">Loading</div>
     <div id="overlay"></div>
     <script type="module" src="../src/js/overlay.js"></script>
   </body>

diff --git a/src/js/overlay.js b/src/js/overlay.js
@@ -32,7 +32,10 @@ let lastMatchId = '';
 let win = 0;
 let lose = 0;
 
-document.querySelector('#overlay').innerHTML = `
+const loading = document.querySelector("#loading");
+const overlay = document.querySelector("#overlay");
+
+overlay.innerHTML = `
   <div id="elements">
     <div id="rankBlock">
       <img alt="rank" src="#" id="imgRank" height="80" width="80" />
@@ -54,6 +57,7 @@ document.querySelector('#overlay').innerHTML = `
     </div>
   </div>
 `
+overlay.style.display = "none";
 
 // Elements
 const imgRank = document.getElementById("imgRank");
@@ -78,6 +82,8 @@ async function main(nickname, tag) {
 
   await decorateCard()
   await checkData(region, puuid)
+  loading.remove()
+  overlay.style.display = "block";
   setIntervalAsync(checkData, 30000, region, puuid);
 }
 

diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -426,6 +426,7 @@ input.nickname {
 	background-repeat: no-repeat;
 	background-size: cover;
 	position: relative;
+	overflow: hidden;
 	&::after {
 		content: "";
 		position: absolute;

diff --git a/src/scss/overlay.scss b/src/scss/overlay.scss
@@ -40,6 +40,7 @@ body {
 	box-sizing: border-box;
 	overflow: hidden;
 }
+
 #elements {
 	display: flex;
 	flex-direction: row;