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 {
@@ -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);
 }
@@ -132,10 +148,15 @@ li.menu-selected {
     border-radius: 50%;
     width: 10px;
     height: 10px;
-  animation: spin 2s linear infinite;
+    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,10 +156,12 @@ export function LoadingText({ text, spinner = false }: LoadingText) {
     }
     return (
         <>
+            <div className="loader-wrapper">
                 <div className="loader">
                     {spinnerElement}
                     <p className="loading-text">{text}</p>
                 </div>
+            </div>
         </>
     )
 }