fix(ui): add slide-down transition to spinner on tab change in FavoritesView
When switching tabs, the loading spinner now animates with slide-down
transition (200ms, 12px) using {#key activeTab} to re-trigger on tab change.
This completes the animation flow: spinner slides down -> fadeout -> content slides up
This commit is contained in:
1 parent
df17f859e0
commit
f910b222d3
1 file changed
+8
@@ -1197,10 +1197,14 @@
|
|||||||
<!-- Content -->
|
<!-- Content -->
|
||||||
<div class="content">
|
<div class="content">
|
||||||
{#if loading}
|
{#if loading}
|
||||||
|
{#key activeTab}
|
||||||
|
<ViewTransition duration={200} distance={12} direction="down">
|
||||||
<div class="loading" class:fading={spinnerFading}>
|
<div class="loading" class:fading={spinnerFading}>
|
||||||
<div class="spinner"></div>
|
<div class="spinner"></div>
|
||||||
<p>Loading favorites...</p>
|
<p>Loading favorites...</p>
|
||||||
</div>
|
</div>
|
||||||
|
</ViewTransition>
|
||||||
|
{/key}
|
||||||
{:else if error}
|
{:else if error}
|
||||||
<div class="error">
|
<div class="error">
|
||||||
<p>Failed to load favorites</p>
|
<p>Failed to load favorites</p>
|
||||||
@@ -1560,10 +1564,14 @@
|
|||||||
</ViewTransition>
|
</ViewTransition>
|
||||||
{:else if activeTab === 'playlists'}
|
{:else if activeTab === 'playlists'}
|
||||||
{#if loadingPlaylists}
|
{#if loadingPlaylists}
|
||||||
|
{#key activeTab}
|
||||||
|
<ViewTransition duration={200} distance={12} direction="down">
|
||||||
<div class="loading" class:fading={spinnerFading}>
|
<div class="loading" class:fading={spinnerFading}>
|
||||||
<div class="spinner"></div>
|
<div class="spinner"></div>
|
||||||
<p>Loading playlists...</p>
|
<p>Loading playlists...</p>
|
||||||
</div>
|
</div>
|
||||||
|
</ViewTransition>
|
||||||
|
{/key}
|
||||||
{:else}
|
{:else}
|
||||||
<ViewTransition duration={200} distance={12} direction="up">
|
<ViewTransition duration={200} distance={12} direction="up">
|
||||||
{#if favoritePlaylists.length === 0}
|
{#if favoritePlaylists.length === 0}
|
||||||
|
|||||||
Reference in new issue
Block a user