Fix loading text alignment

src/css/style.css

@@ -23,15 +23,29 @@ body {
     font-weight: 600;
 }
 
+.loader-wrapper {
+    margin-top: 10em;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
 .loader {
     display: flex;
+    width: min-content;
+    vertical-align: middle;
 }
+
 .loader .spinner {
-    margin-top: 0px;
+    margin-top: auto;
+    margin-bottom: auto;
 }
+
 .loader .loading-text {
-    margin-top: 0px;
+    margin-top: auto;
+    margin-bottom: auto;
     margin-left: 0.5em;
+    white-space: nowrap;
 }
 
 .video-wrapper {
@@ -42,7 +56,7 @@ body {
 video {
     position: absolute;
     height: 100%;
-    width: auto; 
+    width: auto;
 }
 
 main {
@@ -98,6 +112,7 @@ a.menu-heading {
     cursor: pointer;
     display: flex;
 }
+
 .menu-viewcount {
     font-family: 'Prompt', sans-serif;
     font-size: larger;
@@ -113,6 +128,7 @@ li.menu-item {
     background-color: var(--menu-item-color);
     margin-top: 1px;
 }
+
 li.menu-item:hover {
     background-color: var(--menu-item-hover);
 }
@@ -127,15 +143,20 @@ li.menu-selected {
 }
 
 .spinner {
-  border: 4px solid var(--menu-header-text);
-  border-top: 4px solid var(--menu-selected-color);
-  border-radius: 50%;
-  width: 10px;
-  height: 10px;
-  animation: spin 2s linear infinite;
+    border: 4px solid var(--menu-header-text);
+    border-top: 4px solid var(--menu-selected-color);
+    border-radius: 50%;
+    width: 10px;
+    height: 10px;
+    animation: spin 1s linear infinite;
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
 }

src/js/media.tsx

@@ -156,9 +156,11 @@ export function LoadingText({ text, spinner = false }: LoadingText) {
     }
     return (
         <>
-            <div className="loader">
-                {spinnerElement}
-                <p className="loading-text">{text}</p>
+            <div className="loader-wrapper">
+                <div className="loader">
+                    {spinnerElement}
+                    <p className="loading-text">{text}</p>
+                </div>
             </div>
         </>
     )