add camera placeholder

client/src/App.svelte

@@ -8,7 +8,7 @@
   import { initializeTelemetry } from './lib/utils/initializeTelemetry'
   import { onMount } from 'svelte'
 
-  let activeApp: App = 'media-player'
+  let activeApp: App = 'camera'
   let topics: TelemetryTopics = {
     doubles: [
       'orientation',

client/src/lib/Apps/Camera/Camera.svelte

@@ -6,14 +6,10 @@
   class="flex gap-4 w-full py-40 px-10 backdrop-blur-lg justify-center h-full rounded-3xl shadow-md bg-slate-300 bg-opacity-30"
 >
   <div class="my-auto">
-    <CameraContainer
-      cameraUrl="https://www.investopedia.com/thmb/1epKngue22nqkTg1v8H_Yz5O6Ng=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/Soros-final-f2fd5a6b1dce4ef88d60443754b79bcb.png"
-    />
+    <CameraContainer cameraUrl="camera_url_here" />
   </div>
   <div class="my-auto">
-    <CameraContainer
-      cameraUrl="https://www.investopedia.com/thmb/1epKngue22nqkTg1v8H_Yz5O6Ng=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/Soros-final-f2fd5a6b1dce4ef88d60443754b79bcb.png"
-    />
+    <CameraContainer cameraUrl="camera_url_here" />
   </div>
 </div>
 

client/src/lib/Apps/Camera/CameraContainer.svelte

@@ -1,13 +1,34 @@
+<!-- 
+  @component
+  
+  @param cameraUrl - URL of the camera
+
+  Displays a camera feed, or a placeholder if it doesn't exist
+ -->
 <script lang="ts">
   export let cameraUrl: string
 </script>
 
 <div>
-  <img
-    src={cameraUrl}
-    width="400px"
-    height="400px"
-    alt="camera feed"
-    class="rounded-xl shadow-md"
-  />
+  <!-- svelte-ignore a11y-missing-attribute -->
+  <div class="grid">
+    <img
+      src={cameraUrl}
+      width="400px"
+      height="400px"
+      class="rounded-xl shadow-md layer1 z-10"
+      alt="⠀"
+    />
+    <div
+      class="w-[400px] h-[400px] rounded-xl shadow-md bg-neutral-300 animate-pulse layer2"
+    />
+  </div>
 </div>
+
+<style lang="postcss">
+  .layer1,
+  .layer2 {
+    grid-column: 1;
+    grid-row: 1;
+  }
+</style>