feat: add skeleton placeholders for loading posts

src/features/decks/deck-column.tsx

@@ -16,6 +16,7 @@ import { PlatformIcon } from "../platforms/platform-icon";
 import { type ColumnRegistry, useRegisterColumn } from "./column-tools";
 import type { DeckColumn } from "./model";
 import { ResearchPostCard } from "./research-post-card";
+import { ResearchPostSkeleton } from "./research-post-skeleton";
 import { describeSource } from "./source-description";
 
 export function ResearchColumn({
@@ -129,6 +130,7 @@ export function ResearchColumn({
         // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- Make the scrolling feed keyboard-accessible.
         tabIndex={0}
         aria-label={`Posts in ${column.title}`}
+        aria-busy={query.isFetching}
       >
         {visiblePosts.map((post) => (
           <ResearchPostCard
@@ -140,6 +142,13 @@ export function ResearchColumn({
             citationSnapshot={citation?.post === post && !posts.includes(post)}
           />
         ))}
+        {query.isPending || query.isFetchingNextPage ? (
+          <>
+            <ResearchPostSkeleton />
+            <ResearchPostSkeleton />
+            <ResearchPostSkeleton />
+          </>
+        ) : null}
         {query.isError ? (
           <div className="deck-message" role="alert">
             <p>{error.message}</p>

src/features/decks/decks.css

@@ -117,6 +117,7 @@
 .deck-column-results {
   min-height: 0;
   overflow-y: auto;
+  scrollbar-gutter: stable;
   flex: 1;
   overscroll-behavior-y: contain;
   scrollbar-width: thin;

src/features/decks/research-post-skeleton.tsx

@@ -0,0 +1,21 @@
+import { Skeleton } from "#/components/ui/skeleton";
+
+export function ResearchPostSkeleton() {
+  return (
+    <div className="research-post" aria-hidden="true">
+      <div className="flex items-center gap-3">
+        <Skeleton className="size-9 shrink-0" />
+        <div className="flex-1 space-y-2">
+          <Skeleton className="h-3 w-28" />
+          <Skeleton className="h-3 w-20" />
+        </div>
+      </div>
+      <div className="space-y-2 py-3">
+        <Skeleton className="h-3 w-full" />
+        <Skeleton className="h-3 w-full" />
+        <Skeleton className="h-3 w-3/4" />
+      </div>
+      <Skeleton className="h-3 w-24" />
+    </div>
+  );
+}