fix(app): suppress empty-state flash by gating on data-loaded flag
Add a flag set after initial data fetch completes so SessionList and RecapList don't briefly show their empty/onboarding states before content arrives.
This commit is contained in:
@@ -38,6 +38,7 @@ export async function loadInitialData() {
|
|||||||
|
|
||||||
state.projects = projects || [];
|
state.projects = projects || [];
|
||||||
state.stats = stats || {};
|
state.stats = stats || {};
|
||||||
|
state.loaded = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -25,7 +25,8 @@ export const state = reactive({
|
|||||||
showSource: false,
|
showSource: false,
|
||||||
lastArchiveSnapshot: null,
|
lastArchiveSnapshot: null,
|
||||||
undoTimer: null,
|
undoTimer: null,
|
||||||
undoExpires: 0
|
undoExpires: 0,
|
||||||
|
loaded: false
|
||||||
});
|
});
|
||||||
|
|
||||||
// Platform detection
|
// Platform detection
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ defineOptions({ name: 'RecapList' });
|
|||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const recaps = ref([]);
|
const recaps = ref([]);
|
||||||
|
const recapsLoaded = ref(false);
|
||||||
const kind = computed(() => route.query.kind || 'weekly');
|
const kind = computed(() => route.query.kind || 'weekly');
|
||||||
const showGenerate = inject('recapGenerateOpen', ref(false));
|
const showGenerate = inject('recapGenerateOpen', ref(false));
|
||||||
|
|
||||||
@@ -79,6 +80,7 @@ async function loadRecaps() {
|
|||||||
if (data?.cards) results.push({ ...data, _filename: f });
|
if (data?.cards) results.push({ ...data, _filename: f });
|
||||||
}
|
}
|
||||||
recaps.value = results;
|
recaps.value = results;
|
||||||
|
recapsLoaded.value = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
let unsub;
|
let unsub;
|
||||||
@@ -134,7 +136,7 @@ onUnmounted(() => { unsub?.(); });
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content empty-content" v-else>
|
<div class="content empty-content" v-else-if="recapsLoaded">
|
||||||
<section class="tl-section">
|
<section class="tl-section">
|
||||||
<div class="tl-section-head">
|
<div class="tl-section-head">
|
||||||
<span class="year">No {{ kind }} recaps yet</span>
|
<span class="year">No {{ kind }} recaps yet</span>
|
||||||
|
|||||||
@@ -93,7 +93,7 @@ function obeliskStyle(session) {
|
|||||||
<template>
|
<template>
|
||||||
<div class="session-list-wrap">
|
<div class="session-list-wrap">
|
||||||
<!-- Empty state: no data source / debug toggle -->
|
<!-- Empty state: no data source / debug toggle -->
|
||||||
<div v-if="debugEmpty || (!visibleSessions.length && !state.query)" class="empty-content">
|
<div v-if="state.loaded && (debugEmpty || (!visibleSessions.length && !state.query))" class="empty-content">
|
||||||
<div class="empty-eyebrow">
|
<div class="empty-eyebrow">
|
||||||
<span class="diamond"></span>
|
<span class="diamond"></span>
|
||||||
<span>No data source connected</span>
|
<span>No data source connected</span>
|
||||||
@@ -128,7 +128,7 @@ function obeliskStyle(session) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Empty state: search returned nothing -->
|
<!-- Empty state: search returned nothing -->
|
||||||
<div v-else-if="!visibleSessions.length" class="empty">
|
<div v-else-if="state.loaded && !visibleSessions.length" class="empty">
|
||||||
No sessions here.
|
No sessions here.
|
||||||
<span class="hint">{{ state.query ? 'Try a different search term.' : 'Press / to search.' }}</span>
|
<span class="hint">{{ state.query ? 'Try a different search term.' : 'Press / to search.' }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user