yeuimu
6c61a4e871
- Debian-based api image (bookworm-slim), docker/debian mirrors, prisma binaryTargets for openssl 3.0 - nginx: admin SPA under /admin, TLS via acme.sh (ZeroSSL) + auto-renewal cron, http->https redirect - prisma: add origin_goods.delisted migration, sync missing schema (good_image/tag_font_color/good_tags), fix users.createdAt Timestamptz - api: CORS wildcard reflection, helmet CORP cross-origin, price backfill in persistProductDetail, categoryIcon ancestor fallback, mediaByColor per-color gallery in public goods detail - admin: /admin base path (vite + router) - import-data.mjs: udt_name casting, serial sequence advance fix
2.2 KiB
2.2 KiB
title, impact, impactDescription, type, tags
| title | impact | impactDescription | type | tags | |||||
|---|---|---|---|---|---|---|---|---|---|
| Suspense Overrides Async Component Loading and Error Options | MEDIUM | Async component loading/error options are ignored under a parent Suspense, leading to missing spinners and error UIs | gotcha |
|
Suspense Overrides Async Component Loading and Error Options
Impact: MEDIUM - When an async component renders inside a parent <Suspense>, its loadingComponent, errorComponent, delay, and timeout options do not run. The parent Suspense controls loading and error UX instead.
Task Checklist
- Confirm whether the async component is inside a
<Suspense>boundary - Use
suspensible: falsewhen the component must manage its own loading/error UI - Or move loading/error UI to the parent
<Suspense>fallback and an error boundary (onErrorCaptured) - Provide a retry path for failed loads
Incorrect:
<script setup>
import { defineAsyncComponent } from 'vue'
const AsyncDashboard = defineAsyncComponent({
loader: () => import('./Dashboard.vue'),
loadingComponent: LoadingSpinner,
errorComponent: ErrorDisplay,
timeout: 3000
})
</script>
<template>
<Suspense>
<AsyncDashboard />
<template #fallback>Loading...</template>
</Suspense>
</template>
Correct (component handles its own states):
<script setup>
import { defineAsyncComponent } from 'vue'
const AsyncDashboard = defineAsyncComponent({
loader: () => import('./Dashboard.vue'),
loadingComponent: LoadingSpinner,
errorComponent: ErrorDisplay,
timeout: 3000,
suspensible: false
})
</script>
<template>
<AsyncDashboard />
</template>
Correct (parent Suspense owns loading/error UI):
<script setup>
import { onErrorCaptured, ref } from 'vue'
import AsyncDashboard from './AsyncDashboard.vue'
const error = ref(null)
onErrorCaptured((err) => {
error.value = err
return false
})
</script>
<template>
<ErrorDisplay v-if="error" :error="error" />
<Suspense v-else>
<AsyncDashboard />
<template #fallback>
<LoadingSpinner />
</template>
</Suspense>
</template>