27 lines
884 B
Markdown
27 lines
884 B
Markdown
|
# Polish: Loading States
|
||
|
|
|
||
|
|
Every async view needs 3 states: loading skeleton, empty state, timeout warning.
|
||
|
|
|
||
|
|
## Skeleton Pattern
|
||
|
|
```vue
|
||
|
|
<div v-if="isLoading"><!-- skeleton matching layout --></div>
|
||
|
|
<div v-else-if="items.length === 0" class="glass-card text-center py-12">
|
||
|
|
<p class="text-white/60">No items yet</p>
|
||
|
|
</div>
|
||
|
|
<div v-else><!-- real content --></div>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Timeout Warning
|
||
|
|
After 15s show "Taking longer than expected...", after 30s show troubleshooting.
|
||
|
|
```typescript
|
||
|
|
const loadingTooLong = ref(false)
|
||
|
|
const timeout = setTimeout(() => { loadingTooLong.value = true }, 15000)
|
||
|
|
watch(isLoading, (val) => { if (!val) clearTimeout(timeout) })
|
||
|
|
```
|
||
|
|
|
||
|
|
## Priority Views
|
||
|
|
Apps.vue, AppDetails.vue, Marketplace.vue, Dashboard.vue, Cloud.vue, Settings.vue, Server.vue
|
||
|
|
|
||
|
|
## Verify
|
||
|
|
Each view has: `isLoading` ref, skeleton section, empty state, timeout warning. Use global classes only.
|