feat: load icons

This commit is contained in:
Artemy Egorov 2024-07-30 18:16:16 +03:00
parent febafc94df
commit 4a702f0352
6 changed files with 148 additions and 11 deletions

View file

@ -97,7 +97,7 @@ input::placeholder {
@apply hover:px-4;
@apply flex items-center justify-between gap-2 w-full truncate;
@apply flex items-center gap-2 w-full truncate;
}
.close-button {

View file

@ -4,24 +4,39 @@
import Renderer from "./DaletlRenderer/Renderer.svelte";
import { isLoading, state } from "$lib/stores";
import type { VigiState } from "$lib/types";
import GooLoadSpin from "$lib/icons/GooLoadSpin.svelte";
import { slide } from "svelte/transition";
let loading = false;
let data: Root;
let tabId = 0;
state.subscribe((st) => {
data = (st as VigiState).current_data;
if (!loading) {
tabId = (st as VigiState).current_tab_index;
}
});
isLoading.subscribe((val) => {
loading = val;
if (loading) {
tabId = -1;
}
});
</script>
<Block className="browser-window">
{#if loading}
<div>Loading...</div>
{:else}
<div>
{#if loading}
<div transition:slide>
<GooLoadSpin />
</div>
{/if}
<Renderer {data} />
{/if}
</div>
</Block>

View file

@ -1,6 +1,4 @@
<script lang="ts">
import { slide } from "svelte/transition";
import Block from "./Block.svelte";
import WindowControls from "./WindowControls.svelte";
import type { StateTab } from "$lib/types";

View file

@ -1,8 +1,10 @@
<script lang="ts">
import type { StateTab } from "$lib/types";
import { removeTab, selectTab } from "$lib/utils";
import { slide } from "svelte/transition";
import { fade, slide } from "svelte/transition";
import Close from "$lib/icons/Close.svelte";
import { isLoading } from "$lib/stores";
import GooLoad from "$lib/icons/GooLoad.svelte";
export let active = false;
export let tab: StateTab;
@ -12,6 +14,11 @@
let tabElement: HTMLButtonElement;
let hovered = false;
let loading = false;
isLoading.subscribe((val) => {
loading = val;
});
</script>
<div
@ -25,8 +32,10 @@
<button
class="close-button"
transition:slide={{ duration: 100, axis: "x" }}
on:click={() => removeTab(id)}><Close /></button
on:click={() => removeTab(id)}
>
<Close />
</button>
{/if}
<button
@ -35,9 +44,19 @@
transition:slide={{ duration: 100 }}
bind:this={tabElement}
on:click={() => {
selectTab(id);
if (!active) {
selectTab(id);
}
}}
>
{tab.title}
<div>
{#if loading && active}
<GooLoad />
{/if}
</div>
<div>
{tab.title}
</div>
</button>
</div>

View file

@ -0,0 +1,57 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
{...$$props}
>
<defs>
<filter id="svgSpinnersGooeyBalls10">
<feGaussianBlur in="SourceGraphic" result="y" stdDeviation="1.5" />
<feColorMatrix
in="y"
result="z"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
/>
<feBlend in="SourceGraphic" in2="z" />
</filter>
</defs>
<g fill="currentColor" filter="url(#svgSpinnersGooeyBalls10)">
<circle cx="4" cy="12" r="3">
<animate
attributeName="cx"
calcMode="spline"
dur="0.75s"
keySplines=".56,.52,.17,.98;.56,.52,.17,.98"
repeatCount="indefinite"
values="4;9;4"
/>
<animate
attributeName="r"
calcMode="spline"
dur="0.75s"
keySplines=".56,.52,.17,.98;.56,.52,.17,.98"
repeatCount="indefinite"
values="3;8;3"
/>
</circle>
<circle cx="15" cy="12" r="8">
<animate
attributeName="cx"
calcMode="spline"
dur="0.75s"
keySplines=".56,.52,.17,.98;.56,.52,.17,.98"
repeatCount="indefinite"
values="15;20;15"
/>
<animate
attributeName="r"
calcMode="spline"
dur="0.75s"
keySplines=".56,.52,.17,.98;.56,.52,.17,.98"
repeatCount="indefinite"
values="8;3;8"
/>
</circle>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

@ -0,0 +1,48 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
{...$$props}
>
<defs>
<filter id="svgSpinnersGooeyBalls20">
<feGaussianBlur in="SourceGraphic" result="y" stdDeviation="1" />
<feColorMatrix
in="y"
result="z"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
/>
<feBlend in="SourceGraphic" in2="z" />
</filter>
</defs>
<g filter="url(#svgSpinnersGooeyBalls20)">
<circle cx="5" cy="12" r="4" fill="currentColor">
<animate
attributeName="cx"
calcMode="spline"
dur="2s"
keySplines=".36,.62,.43,.99;.79,0,.58,.57"
repeatCount="indefinite"
values="5;8;5"
/>
</circle>
<circle cx="19" cy="12" r="4" fill="currentColor">
<animate
attributeName="cx"
calcMode="spline"
dur="2s"
keySplines=".36,.62,.43,.99;.79,0,.58,.57"
repeatCount="indefinite"
values="19;16;19"
/>
</circle>
<animateTransform
attributeName="transform"
dur="0.75s"
repeatCount="indefinite"
type="rotate"
values="0 12 12;360 12 12"
/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB