add initial spinner

Author: codeSTACKr

frontend/css/style.css

@@ -296,6 +296,14 @@ section {
   width: 100%;
 }
 
+/* SPINNER */
+.dot-spin {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(3);
+}
+
 /* MEDIA QUERIES */
 
 @media screen and (max-width: 768px) {

frontend/index.html

@@ -160,32 +160,7 @@ <h2>Minted!</h2>
       </div>
     </section>
 
-    <!-- <section>
-      <h1>MINT</h1>
-      <div>
-        <div id="address">Wallet not connected</div>
-
-        <div>
-          <button id="connect" onclick="connect()">Connect your wallet</button>
-        </div>
-        <div>
-          <div>Minting price per token: <a id="price" target="_blank"></a></div>
-          <div>Maximum tokens per mint: <span id="maxAmount"></span></div>
-
-          <div>
-            <input
-              id="amount"
-              type="number"
-              step="1"
-              min="1"
-              max="10"
-              value="1"
-            />
-          </div>
-        </div>
-      </div>
-      <button id="mint" onclick="mint()">Mint</button>
-    </section> -->
+    <div id="spinner" class="dot-spin"></div>
 
     <div class="splide">
       <div class="splide__track">

frontend/js/app.js

@@ -83,6 +83,7 @@ async function loadInfo() {
   const actionButton = document.getElementById("actionButton");
   const mintContainer = document.getElementById("mintContainer");
   const mintButton = document.getElementById("mintButton");
+  const spinner = document.getElementById("spinner");
 
   let startTime = "";
   if (publicMintActive) {
@@ -130,6 +131,9 @@ async function loadInfo() {
   clockdiv.setAttribute("data-date", startTime);
   countdown();
 
+  // HIDE SPINNER
+  spinner.classList.add('hidden');
+  
   // SHOW CARD
   setTimeout(() => {
     const countdownCard = document.querySelector('.countdown');