add noise canvas for loading indicator and improve video loading experience

static/css/style.css

@@ -12,8 +12,9 @@
   --radius: 12px;
   --radius-sm: 8px;
   --shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
-  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Helvetica, Arial, sans-serif;
+  --font:
+    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif;
 }
 
 * {
@@ -95,7 +96,9 @@ header {
   color: var(--text-primary);
   font-size: 14px;
   outline: none;
-  transition: border-color 0.2s, box-shadow 0.2s;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
 }
 .search-wrap input:focus {
   border-color: var(--accent);
@@ -166,6 +169,20 @@ header {
   object-fit: contain;
   background: #000;
 }
+.noise-canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: none;
+  opacity: 1;
+  image-rendering: pixelated;
+  transition: opacity 0.3s ease;
+}
+.noise-canvas.hidden {
+  opacity: 0;
+}
 .video-placeholder {
   position: absolute;
   inset: 0;
@@ -502,4 +519,4 @@ header {
 
 [hidden] {
   display: none !important;
-}
+}