Align sidebar loading indicators and history heading

css/style.css

@@ -1144,12 +1144,6 @@ button:not(.icon-button):focus {
   display: flex;
 }
 
-.watch-history-status {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
 .status-spinner--inline {
   animation: spin 1s linear infinite;
   border: 0.125rem solid rgba(96, 165, 250, 0.35);
@@ -1160,6 +1154,29 @@ button:not(.icon-button):focus {
   width: 1rem;
 }
 
+.sidebar-loading-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 3rem 0;
+  width: 100%;
+  grid-column: 1 / -1;
+}
+
+.sidebar-loading-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: #6b7280;
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+}
+
+.sidebar-loading-text {
+  white-space: nowrap;
+}
+
 .status-banner {
   align-items: center;
   background-color: rgba(31, 41, 55, 0.9);