archy/.claude/skills/polish-loading/SKILL.md

Skill: Polish Loading States

Add skeleton loaders, loading indicators, timeout warnings, and empty states to all async views. No view should ever show a blank screen.

Skeleton Loader Component

Create or use a SkeletonLoader.vue component with the glassmorphism style:

• Background: bg-white/5 with shimmer animation
• Rounded corners matching the card it replaces
• Animate with CSS @keyframes shimmer (translate gradient left to right)
• Must use global classes from style.css, not inline Tailwind

Views to Fix

For EACH view in neode-ui/src/views/, verify these states exist:

1. Loading State

• Show skeleton placeholders immediately on mount
• Pattern:

  <template>
    <div v-if="isLoading">
      <!-- Skeleton matching the layout -->
    </div>
    <div v-else>
      <!-- Real content -->
    </div>
  </template>
  

2. Empty State

• When data loads but is empty (zero items)
• Show helpful message with CTA
• Pattern:

  <div v-if="!isLoading && items.length === 0" class="glass-card text-center py-12">
    <p class="text-white/60">No apps installed yet</p>
    <router-link to="/marketplace" class="glass-button mt-4">Browse Marketplace</router-link>
  </div>
  

3. Timeout Warning

• After 15 seconds of loading, show "Taking longer than expected..."
• After 30 seconds, show troubleshooting options
• Pattern:

  const loadingTooLong = ref(false)
  let timeout: ReturnType<typeof setTimeout>
  
  onMounted(() => {
    timeout = setTimeout(() => { loadingTooLong.value = true }, 15000)
  })
  
  watch(isLoading, (val) => { if (!val) clearTimeout(timeout) })
  

Priority Views (must have all 3 states)

1. Apps.vue — app grid skeleton, "No apps installed" empty state
2. AppDetails.vue — detail card skeleton, loading indicator
3. Marketplace.vue — app card grid skeleton, "Loading apps..." with timeout
4. Dashboard.vue — metric card skeletons
5. Cloud.vue — file list skeleton, "No files" empty state
6. Settings.vue — settings section skeleton
7. Server.vue — server info skeleton

Verification

For each view, confirm:

• isLoading ref exists and is set properly
• Template has v-if="isLoading" skeleton section
• Template has empty state for zero-data case
• Loading timeout warning after 15s
• Skeleton uses global classes, not inline Tailwind

Deploy After Fixes

Always deploy and verify on live server:

./scripts/deploy-to-target.sh --live

Test by throttling network in browser DevTools to observe loading states.