Component-Level Loading Templates for Async Components

[NabilJunipeer]

Proposition: Native Component-Level Loading Templates

Currently, Vue offers <Suspense> as a way to handle asynchronous component loading or components returning a Promise. This works well for higher-level async control but has a key limitation: the responsibility for displaying loading states is externalized to the parent component.

The Problem

When a component performs async setup — for example, using a top-level await — it must return a Promise. This forces the parent component to handle its loading state via <Suspense>, often requiring it to:

• Define placeholder UI (e.g., skeletons, spinners, etc.)
• Know how to visually represent the child’s loading state

This creates an unnecessary coupling:
If the async component changes (e.g., layout, structure, or default UI), the parent must also update its corresponding loading UI. The result is reduced encapsulation and more boilerplate — especially for reusable, self-contained components.

The Workaround

Currently, developers can wrap their async component in an extra wrapper component that itself uses <Suspense>, effectively internalizing the loading state. But this adds another layer of abstraction and feels redundant.

Proposed Solution

Introduce component-level loading templates, allowing components to declare their own fallback UI directly in the same file. Conceptually, this could look like:

<template>
  <!-- normal render -->
  <input v-model="value" />
</template>

<template loading>
  <!-- shown while async setup / top-level await resolves -->
  <div class="skeleton-input"></div>
</template>

<script setup lang="ts">
const data = await fetchData() // top-level await
</script>

Benefits

Encapsulation: Each component fully defines its own loading UI, without leaking implementation details upward.

Reduced boilerplate: No need for wrapper components or parent-level <Suspense> for simple async cases.

Improved maintainability: Components remain self-contained and easier to refactor.

Optional coexistence: <Suspense> would still be valuable for coordinating multiple async components or complex async flows, but not mandatory for isolated cases.