add noise canvas for loading indicator and improve video loading experience

templates/index.html

@@ -4,7 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>TeslaCam Video Player</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link
+      rel="stylesheet"
+      href="{{ url_for('static', filename='css/style.css') }}"
+    />
   </head>
   <body>
     <!-- Header -->
@@ -56,6 +59,7 @@
       <section class="player-panel">
         <div class="video-stage">
           <video id="player" controls preload="metadata" playsinline></video>
+          <canvas id="noiseCanvas" class="noise-canvas"></canvas>
           <div class="video-badge" id="videoBadge">
             <span class="dot"></span><span id="badgeText">Front</span>
           </div>