fix: reserve continue watching space

templates/index.gohtml

@@ -2,7 +2,9 @@
 {{define "content"}}
   <div class="flex flex-col gap-10">
   {{if .User}}
-  <div hx-get="/api/catalog/continue" hx-trigger="load" hx-swap="outerHTML"></div>
+  <div hx-get="/api/catalog/continue" hx-trigger="load" hx-swap="outerHTML">
+    {{template "continue_watching_skeleton"}}
+  </div>
   {{end}}
 
   <section class="w-full">
@@ -72,3 +74,18 @@
   {{end}}
 </div>
 {{end}}
+
+{{define "continue_watching_skeleton"}}
+<section id="continue-watching-section" class="w-full">
+  <h2 class="mb-3 text-lg font-normal text-foreground">Continue Watching</h2>
+  <div class="scrollbar-hide flex snap-x snap-mandatory gap-2 overflow-x-auto pb-4">
+    {{range (seq 3)}}
+      <div class="flex w-70 shrink-0 snap-start flex-col gap-2 2xl:w-lg">
+        <div class="skeleton aspect-video w-full overflow-hidden rounded-xl"></div>
+        <div class="skeleton h-5 w-2/3 rounded"></div>
+        <div class="skeleton h-4 w-1/2 rounded opacity-70"></div>
+      </div>
+    {{end}}
+  </div>
+</section>
+{{end}}