archipelagoandClaude Fable 5
a9a20039eb
Demo images / Build & push demo images (push) Successful in 3m32s
Puts Marketplace.vue's data on the cache and adds the subtle background-
refresh indicator D-05 calls for:
- RefreshIndicator.vue: presentational, state-driven (ResourceLoadState).
Renders nothing for ready/idle/loading — a first load is the view's own
skeleton's job, not this component's — and a role="status"
aria-live="polite" spinner only while refreshing. A fixed-size outer slot
keeps its appearance/disappearance from ever shifting layout.
- Marketplace.vue: loadCommunityMarketplace()/loadBitcoinPruneStatus() move
onto useCachedResource behind shared keys app-catalog (300s TTL, persist —
near-static catalog, D-06 discretion) and bitcoin.prune-status (default
30s TTL, persist — both non-sensitive/small per T-02-01). app-catalog is a
shared key so Discover.vue's identical loader picks up the same entry
without its own conversion in 02-04. Error handling is keep-last-value
(D-07): a rejected refresh sets the existing communityError banner ref,
never a toast, and prior app cards stay on screen.
- Side-effect audit (the precedent 02-04 repeats across remaining tabs):
marketplaceAnimationDone is genuinely once-per-session intro state, stays
in onMounted; the two data loads needed no onMounted/onActivated hook of
their own at all — useCachedResource's internal onActivated (wired in
Task 1) already revalidates them on every kept-alive tab re-entry,
staleness-gated so a quick revisit issues no fetch. No interval,
subscription or window listener exists in this view, so no onDeactivated
teardown was needed either.
- Tests: RefreshIndicator's full render-nothing/render-something matrix
added to keepAliveTabs.test.ts (no router dependency, safe to colocate).
The D-07 rejected-refresh-keeps-content-and-no-toast test mounts
Marketplace.vue itself but lives in a new file,
views/__tests__/MarketplaceRefresh.test.ts, following the in-repo
CloudPeersRefresh.test.ts mount-the-view pattern — vi.mock('vue-router')
is hoisted file-wide, so colocating it in keepAliveTabs.test.ts would
clobber that file's real createRouter/createMemoryHistory used by the
DashboardRouterView tests (Rule 3 auto-fix; deviation from the plan's
literal single-test-file file list, documented here for the SUMMARY).
Marketplace.vue gains a defineExpose({ loadCommunityMarketplace,
loadBitcoinPruneStatus }) for tests, mirroring Cloud.vue's existing
defineExpose({ loadPeers }).
Full suite (87 files / 709 tests), type-check and build all green; the
built Marketplace chunk carries refresh-indicator.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
61 lines
1.6 KiB
Vue
61 lines
1.6 KiB
Vue
<template>
|
|
<div class="refresh-indicator-slot" aria-hidden="false">
|
|
<div
|
|
v-if="state === 'refreshing'"
|
|
class="refresh-indicator"
|
|
role="status"
|
|
aria-live="polite"
|
|
>
|
|
<span class="refresh-indicator-spinner" aria-hidden="true" />
|
|
<span class="sr-only">{{ label ?? 'Refreshing…' }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { ResourceLoadState } from '@/stores/resources'
|
|
|
|
// Subtle background-refresh indicator (D-05): visible only while a cached
|
|
// resource is revalidating behind already-rendered content. A first load
|
|
// is the view's own skeleton's job, not this component's — 'loading'
|
|
// intentionally renders nothing here, same as 'ready'/'idle'. No stale-age
|
|
// text or "last updated" badge (D-05 rules those out).
|
|
defineProps<{
|
|
state: ResourceLoadState
|
|
label?: string
|
|
}>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Fixed-size outer slot so the indicator appearing/disappearing never
|
|
shifts surrounding layout — callers can drop this inline without also
|
|
reserving space themselves. */
|
|
.refresh-indicator-slot {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.refresh-indicator {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.refresh-indicator-spinner {
|
|
width: 0.875rem;
|
|
height: 0.875rem;
|
|
border: 2px solid rgba(255, 255, 255, 0.15);
|
|
border-top-color: rgba(255, 255, 255, 0.55);
|
|
border-radius: 50%;
|
|
animation: refresh-indicator-spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes refresh-indicator-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
</style>
|