diff --git a/src/components/bucket-list/my-list-skeleton.tsx b/src/components/bucket-list/my-list-skeleton.tsx
index e788bf0..d7d9469 100644
--- a/src/components/bucket-list/my-list-skeleton.tsx
+++ b/src/components/bucket-list/my-list-skeleton.tsx
@@ -9,17 +9,24 @@ export function MyListSkeleton() {
       <div className="h-10 w-40 animate-pulse rounded bg-muted" />
       <div className="mt-3 h-4 w-48 animate-pulse rounded bg-muted" />
       <div className="mt-7 h-12 max-w-2xl animate-pulse rounded-xl bg-muted" />
-      <div className="mt-7 max-w-2xl divide-y divide-border">
-        {[1, 2, 3].map((row) => (
-          <div key={row} className="flex gap-4 py-5">
-            <div className="size-6 animate-pulse rounded-full bg-muted" />
-            <div className="flex-1 space-y-3">
-              <div className="h-5 w-3/4 animate-pulse rounded bg-muted" />
-              <div className="h-3 w-1/2 animate-pulse rounded bg-muted" />
-            </div>
+      <MyListRowsSkeleton className="mt-7 max-w-2xl" />
+    </div>
+  );
+}
+
+/** Row placeholders only, so the page heading and add field can paint first. */
+export function MyListRowsSkeleton({ className = 'mt-7' }: { className?: string }) {
+  return (
+    <div aria-hidden="true" className={`divide-y divide-border ${className}`}>
+      {[1, 2, 3].map((row) => (
+        <div key={row} className="flex gap-4 py-5">
+          <div className="size-6 animate-pulse rounded-full bg-muted" />
+          <div className="flex-1 space-y-3">
+            <div className="h-5 w-3/4 animate-pulse rounded bg-muted" />
+            <div className="h-3 w-1/2 animate-pulse rounded bg-muted" />
           </div>
-        ))}
-      </div>
+        </div>
+      ))}
     </div>
   );
 }
diff --git a/src/components/bucket-list/my-list.tsx b/src/components/bucket-list/my-list.tsx
index ce5edec..15920ca 100644
--- a/src/components/bucket-list/my-list.tsx
+++ b/src/components/bucket-list/my-list.tsx
@@ -6,7 +6,7 @@ import { useEffect, useRef, useState } from 'react';
 import { StorageModeProvider, StorageModeStatus } from '~/components/storage-mode-provider';
 import { normalizeDreamTitle } from '~/lib/dream-atlas';
 import { ManualItemInput } from './manual-item-input';
-import { MyListSkeleton } from './my-list-skeleton';
+import { MyListRowsSkeleton } from './my-list-skeleton';
 import {
   localMyListStorage,
   serverMyListStorage,
@@ -140,7 +140,6 @@ export function MyList({
     />
   ) : null;
 
-  if (!loaded && !error) return <MyListSkeleton />;
   function row(item: MyListItem) {
     return (
       <div key={item.id}>
@@ -170,7 +169,9 @@ export function MyList({
                   My list
                 </h1>
                 <p className="mt-1 text-muted-foreground">
-                  {active.length} still calling · {lived.length} lived
+                  {loaded
+                    ? `${active.length} still calling · ${lived.length} lived`
+                    : 'Opening your list…'}
                 </p>
               </div>
               <div className="max-w-32 pt-2 text-right">
@@ -208,7 +209,13 @@ export function MyList({
                 .
               </p>
             )}
-            <div className="mt-7 divide-y divide-border/60">{active.map(row)}</div>
+            {!loaded && !error ? (
+              <div role="status" aria-label="Loading My list">
+                <MyListRowsSkeleton />
+              </div>
+            ) : (
+              <div className="mt-7 divide-y divide-border/60">{active.map(row)}</div>
+            )}
             {lived.length > 0 && (
               <details open className="mt-9">
                 <summary className="flex min-h-11 cursor-pointer list-none items-center justify-between border-t border-border/60 px-3 text-sm text-muted-foreground">