fix: address Copilot review comments on PR #795

- css: replace hashed .announcementBar_mb4j selector with
  [class*=announcementBar] to survive Docusaurus rebuilds
- css: remove invalid empty @font-face block; a @font-face without
  font-family/src has no effect in any browser
- ResponsivePlayer: add visible spinner + role=status to Suspense
  fallback for better UX on slow connections
- netlify.toml: change /fonts/* from immutable to 1-week cache since
  font files (Roboto-Bold.woff2 etc.) are not content-hashed

Signed-off-by: Aryan Parikh <aryan81006@gmail.com>

Author: Aryan-B-Parikh

netlify.toml

@@ -16,16 +16,18 @@
   [headers.values]
     Cache-Control = "public, max-age=31536000, immutable"
 
-# Static images, fonts served from /img and /fonts
+# Static images served from /img
 [[headers]]
   for = "/img/*"
   [headers.values]
     Cache-Control = "public, max-age=86400, stale-while-revalidate=604800"
 
+# Fonts are NOT content-hashed (e.g. Roboto-Bold.woff2) so immutable is unsafe.
+# Use a 1-week cache with stale-while-revalidate instead.
 [[headers]]
   for = "/fonts/*"
   [headers.values]
-    Cache-Control = "public, max-age=31536000, immutable"
+    Cache-Control = "public, max-age=604800, stale-while-revalidate=86400"
 
 # Static JS helpers (non-hashed scripts in /docs/js and /docs/scripts)
 [[headers]]

src/components/responsive-player/ResponsivePlayer.js

@@ -16,8 +16,12 @@ function ResponsivePlayer({url, loop, playing}) {
         fallback={
           <div
             className="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-gray-100 dark:bg-gray-800"
+            role="status"
             aria-label="Loading video player"
-          />
+          >
+            <div className="h-8 w-8 animate-spin rounded-full border-2 border-gray-400 border-t-transparent dark:border-gray-500" />
+            <span className="sr-only">Loading video player</span>
+          </div>
         }
       >
         <ReactPlayer

src/css/custom.css

@@ -3236,20 +3236,16 @@ img:not([loading]) {
 /*
  * Reduce paint layers for the announcement bar (it's a position:sticky
  * element and can cause extra compositing cost on mobile).
+ * Using attribute substring selector to avoid relying on a hashed class name
+ * that changes between Docusaurus builds.
  */
-.announcementBar_mb4j {
+[class*="announcementBar"] {
   will-change: auto;
   transform: translateZ(0);
 }
 
 /*
- * Font-display: swap fallback for any @font-face rules Docusaurus injects.
- * This prevents invisible text during webfont load (FOIT → FOUT).
- * The actual font files are already preloaded via webpack-font-preload-plugin;
- * this rule is a safety net for any font loaded via a stylesheet.
+ * Font-display: swap is configured per @font-face declaration in
+ * src/fonts. Docusaurus-injected Google Fonts links already include
+ * &display=swap in the URL, so no additional override is needed here.
  */
-@supports (font-display: swap) {
-  @font-face {
-    font-display: swap;
-  }
-}