mosaicstack/stack
25
0
Fork 1
Code Issues 344 Pull Requests 13 Actions Packages Projects Releases 15 Wiki Activity

format: apply repo prettier (3.8.1) to the folded skills tree

Browse Source 
963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.
This commit is contained in:
fargo
2026-08-19 14:37:17 -05:00
parent d2eeb64433
commit 1a822493ba
962 changed files with 29594 additions and 27188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/mosaic/framework/skills/vue-best-practices/reference/async-component-loading-delay.md
+19 -19
View File
@@ -12,14 +12,14 @@ Without a delay, the loading component briefly appears and immediately disappear
```vue
<script setup>
import { defineAsyncComponent } from 'vue'
import LoadingSpinner from './LoadingSpinner.vue'
import { defineAsyncComponent } from 'vue';
import LoadingSpinner from './LoadingSpinner.vue';
const AsyncDashboard = defineAsyncComponent({
loader: () => import('./Dashboard.vue'),
loadingComponent: LoadingSpinner,
delay: 0 // Loading spinner flashes immediately, causing flicker
})
delay: 0, // Loading spinner flashes immediately, causing flicker
});
</script>
```
@@ -27,42 +27,42 @@ const AsyncDashboard = defineAsyncComponent({
```vue
<script setup>
import { defineAsyncComponent } from 'vue'
import LoadingSpinner from './LoadingSpinner.vue'
import { defineAsyncComponent } from 'vue';
import LoadingSpinner from './LoadingSpinner.vue';
const AsyncDashboard = defineAsyncComponent({
loader: () => import('./Dashboard.vue'),
loadingComponent: LoadingSpinner,
// delay: 200 is the default, but you can adjust based on your UX needs
})
});
</script>
```
```vue
<script setup>
import { defineAsyncComponent } from 'vue'
import LoadingSpinner from './LoadingSpinner.vue'
import ErrorDisplay from './ErrorDisplay.vue'
import { defineAsyncComponent } from 'vue';
import LoadingSpinner from './LoadingSpinner.vue';
import ErrorDisplay from './ErrorDisplay.vue';
// For slower expected loads, consider a shorter delay
const AsyncHeavyChart = defineAsyncComponent({
loader: () => import('./HeavyChart.vue'),
loadingComponent: LoadingSpinner,
errorComponent: ErrorDisplay,
delay: 100, // Show loading sooner for components known to be heavy
timeout: 30000 // Longer timeout for complex components
})
delay: 100, // Show loading sooner for components known to be heavy
timeout: 30000, // Longer timeout for complex components
});
</script>
```
## Choosing the Right Delay
| Scenario | Recommended Delay |
|----------|-------------------|
| Fast network, small component | 200ms (default) |
| Known heavy component | 100ms |
| Interactive element user is waiting for | 50-100ms |
| Background content load | 300-500ms |
| Scenario | Recommended Delay |
| --------------------------------------- | ----------------- |
| Fast network, small component | 200ms (default) |
| Known heavy component | 100ms |
| Interactive element user is waiting for | 50-100ms |
| Background content load | 300-500ms |
## Key Points