diff --git a/apps/desktop/src/app/chat/sidebar/section-states.tsx b/apps/desktop/src/app/chat/sidebar/section-states.tsx
index d65eda9813..62e334a5e9 100644
--- a/apps/desktop/src/app/chat/sidebar/section-states.tsx
+++ b/apps/desktop/src/app/chat/sidebar/section-states.tsx
@@ -4,19 +4,22 @@ import { Skeleton } from '@/components/ui/skeleton'
 import { useI18n } from '@/i18n'
 import { cn } from '@/lib/utils'
 
+import { SidebarRowCluster, SidebarRowShell, SidebarRowStack } from './chrome'
+
+// Stands in for session rows, so it borrows their chrome instead of copying
+// the grid — a placeholder on a different edge than the rows it resolves into
+// makes the list step sideways on load.
 export function SidebarSessionSkeletons() {
   return (
-    <div aria-hidden="true" className="grid gap-px">
+    <SidebarRowStack aria-hidden="true">
       {['w-32', 'w-40', 'w-28', 'w-36', 'w-24'].map((width, i) => (
-        <div
-          className="grid min-h-[1.625rem] grid-cols-[minmax(0,1fr)_1.375rem] items-center rounded-md pl-2"
-          key={`${width}-${i}`}
-        >
-          <Skeleton className={cn('h-3 rounded-sm', width)} />
-          <Skeleton className="mx-auto size-3.5 rounded-sm opacity-60" />
-        </div>
+        <SidebarRowShell actions={<Skeleton className="size-3.5 rounded-sm opacity-60" />} key={`${width}-${i}`}>
+          <SidebarRowCluster>
+            <Skeleton className={cn('h-3 rounded-sm', width)} />
+          </SidebarRowCluster>
+        </SidebarRowShell>
       ))}
-    </div>
+    </SidebarRowStack>
   )
 }