xcc.es
[READ-ONLY] Mirror of https://github.com/mrgnw/ananas. learn multiple languages at once
ananas.xcc.es
animate without $effect
author
Morgan
date
(May 28, 2025, 1:42 PM +0200)
commit
ec946671
ec946671d1eecc0b7feb7e9bfeffd910e6597dd2
parent
3116126f
3116126f37b2f51466817ecf426fd2fab2d660e6
+9
-24
+9
-24
src/routes/+page.svelte
+9
-24
src/routes/+page.svelte
···
11
11
12
12
let result = $state(null); // Add result state to hold translation result
13
13
let { data } = $props();
14
-
let visibleItems = $state(new Set());
14
+
let hasLoadedInitialAnimations = $state(false);
15
15
16
16
let userLanguages = $derived(userStore.user.selectedLanguages);
17
17
···
20
20
return (translationHistoryStore.history.translations || []).slice(0, 3);
21
21
});
22
22
23
-
// Watch for new translations and make them visible immediately
24
-
$effect(() => {
25
-
const currentTranslations = recentTranslations();
26
-
currentTranslations.forEach(translation => {
27
-
if (!visibleItems.has(translation.timestamp)) {
28
-
// New translation detected, add it to visible items immediately
29
-
visibleItems.add(translation.timestamp);
30
-
visibleItems = new Set(visibleItems); // Trigger reactivity
31
-
}
32
-
});
33
-
});
34
-
35
23
onMount(async () => {
36
24
// Load from database in background if user is authenticated
37
25
if (userStore.user.auth.isAuthenticated) {
38
26
await translationHistoryStore.loadFromDatabaseInBackground();
39
27
}
40
28
41
-
// Start showing recent translations with staggered timing
29
+
// Start initial load animations with stagger
42
30
setTimeout(() => {
43
-
const recentItems = (translationHistoryStore.history.translations || []).slice(0, 3);
44
-
recentItems.forEach((item, index) => {
45
-
setTimeout(() => {
46
-
visibleItems.add(item.timestamp);
47
-
visibleItems = new Set(visibleItems); // Trigger reactivity
48
-
}, index * 120);
49
-
});
31
+
hasLoadedInitialAnimations = true;
50
32
}, 300);
51
33
});
52
34
</script>
···
73
55
{#if translationHistoryStore.history.translations && translationHistoryStore.history.translations.length > 0}
74
56
<div class="recent-translations-section">
75
57
<div class="recent-translations-grid">
76
-
{#each translationHistoryStore.history.translations.slice(0, 3).filter(translation => visibleItems.has(translation.timestamp)) as translation, index (translation.timestamp)}
58
+
{#each recentTranslations() as translation, index (translation.timestamp)}
77
59
<div
78
60
class="recent-translation-item"
79
61
animate:flip={{ duration: 400 }}
80
-
in:fade={{ duration: 400 }}
62
+
in:fade={{
63
+
duration: hasLoadedInitialAnimations ? 300 : 400,
64
+
delay: hasLoadedInitialAnimations ? 0 : index * 120
65
+
}}
81
66
>
82
67
<MultiLangCard
83
68
translation={{ translations: translation.output }}
···
90
75
</div>
91
76
{/each}
92
77
</div>
93
-
{#if visibleItems.size > 0}
78
+
{#if recentTranslations().length > 0}
94
79
<div class="view-all-link">
95
80
<a href="/review" class="view-all-btn">View All Translations →</a>
96
81
</div>