implemented loading animation during requests

data/style.css

@@ -1,6 +1,7 @@
 :root {
     --color-primary: #087e8b;
     --color-on-primary: white;
+    --color-background: #222;
     --color-danger: #fa2b58;
 }
 
@@ -14,7 +15,7 @@ body {
 }
 
 main {
-    background-color: #222;
+    background-color: var(--color-background);
     max-width: 700px;
     padding: 8px max(5%, 8px);
     margin: 0 auto;
@@ -45,7 +46,7 @@ label {
 input,
 select {
     width: clamp(200px, 100%, 400px);
-    background-color: #222;
+    background-color: var(--color-background);
     color: white;
     border: 1px solid white;
     border-radius: 8px;
@@ -78,7 +79,7 @@ button[type="reset"] {
 }
 
 .hidden {
-    display: none;
+    display: none !important;
 }
 
 label.switch {
@@ -136,3 +137,61 @@ label.switch input:checked + .slider::before {
     justify-content: center;
     gap: 8px;
 }
+
+.loading-screen {
+    display: grid;
+    justify-content: center;
+}
+
+h2.error {
+    color: var(--color-danger);
+}
+
+button.reload {
+    display: block;
+    margin: 0 auto;
+}
+
+.spinner-container {
+    width: min(max-content, 100%);
+}
+
+.spinner {
+    position: relative;
+    margin: 10px auto;
+    background: conic-gradient(transparent 150deg, var(--color-primary));
+    --outer-diameter: 50px;
+    width: var(--outer-diameter);
+    height: var(--outer-diameter);
+    border-radius: 50%;
+
+    animation-name: spin;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
+.spinner::after {
+    position: absolute;
+    content: "";
+    display: block;
+    --spinner-border: 5px;
+    top: var(--spinner-border);
+    left: var(--spinner-border);
+
+    --inner-diameter: calc(var(--outer-diameter) - 2 * var(--spinner-border));
+    width: var(--inner-diameter);
+    height: var(--inner-diameter);
+
+    background-color: var(--color-background);
+    border-radius: 50%;
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}