Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-02-26 21:18:50 +01:00
Code Issues Projects Releases Packages Wiki Activity

web/OmniboxIcon: spin the spinner only when it's visible

Browse source 
before it'd always spin in background while being invisible... which is probably not really good
This commit is contained in:
wukko 2025-02-25 17:43:22 +06:00
parent c45c1d13c0
commit 2573089378
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
1 changed files with 32 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
web/src/components/save/OmniboxIcon.svelte
View file

@ -3,10 +3,39 @@
import IconLoader2 from "@tabler/icons-svelte/IconLoader2.svelte";
export let loading: boolean;
export let animated = !!loading;
/*
initial spinner state is equal to loading state,
just so it's animated on init (or not).
on transition start, it overrides the value
to start spinning (to prevent zooming in with no spinning).
then, on transition end, when the spinner is hidden,
and if loading state is false, the class is removed
and the spinner doesn't spin in background while being invisible.
if loading state is true, then it will just stay spinning
(aka when it's visible and should be spinning).
the spin on transition start is needed for the whirlpool effect
of the link icon being sucked into the spinner.
this may be unnecessarily complicated but i think it looks neat.
*/
</script>
<div id="input-icons" class:loading>
<div class="input-icon spinner-icon">
<div
class="input-icon spinner-icon"
class:animated
on:transitionstart={() => {
animated = true;
}}
on:transitionend={() => {
animated = !!loading;
}}
>
<IconLoader2 />
</div>
<div class="input-icon link-icon">
@ -49,12 +78,12 @@
opacity: 0;
}
.spinner-icon :global(svg) {
.spinner-icon.animated :global(svg) {
animation: spin 0.7s infinite linear;
}
.loading .link-icon :global(svg) {
animation: spin 0.7s infinite linear;
animation: spin 0.7s linear;
}
.loading .link-icon {