XRDRestaurantCardSkeleton

Loading-state placeholder that mirrors XRDProfileCard's dimensions. Used while restaurant data is being fetched (SSR pending or client-side loading). Lives at app/components/X/RD/RestaurantCardSkeleton.vue (auto-imported as XRDRestaurantCardSkeleton).

Usage

<div v-if="pending" class="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
  <XRDRestaurantCardSkeleton v-for="n in 6" :key="n" />
</div>
<div v-else class="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
  <XRDProfileCard v-for="r in restaurants" :key="r.id" :restaurant="r" />
</div>

Where it's used

• /restaurants listing (when fetching)
• /cuisines/[slug] cuisine landing page
• /neighborhoods/[slug] neighborhood landing page

Notes

• No props — purely presentational
• Uses USkeleton from Nuxt UI v4 for consistent shimmer animation
• Heights chosen to match the loaded card so layout doesn't shift when data arrives (no CLS)

AI Context

component: XRDRestaurantCardSkeleton
package: "@xenterprises/nuxt-x-restaurants"
use-when: >
  Adding loading states to restaurant listing pages. Mirrors
  XRDProfileCard so layout is stable while data loads (no CLS).