PLG_Development/PLG-MuDiCS
3
0
Fork 0
mirror of https://codeberg.org/PLG-Development/PLG-MuDiCS synced 2026-07-06 00:47:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(control): added upload finished animation

Browse Source
This commit is contained in:
E44
2026-01-05 19:09:53 +01:00
parent a8a59bd543
commit 6f0b05ca67
1 changed files with 22 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
control/frontend/src/lib/components/InodeElement.svelte
+22 -6
View File
@@ -55,6 +55,20 @@
loading_data = liveQuery(() => get_loading_data(get_file_primary_key(file), d)); loading_data = liveQuery(() => get_loading_data(get_file_primary_key(file), d));
}); });
let loading_finished = $state(false);
$effect(() => {
if (!loading_data) return;
let prev: boolean | undefined;
const sub = loading_data.subscribe((v) => {
if (prev === true && v.is_loading === false) {
loading_finished = true;
setTimeout(() => (loading_finished = false), 200);
}
prev = v.is_loading;
});
return () => sub.unsubscribe();
});
let thumbnail_url = liveQuery(() => get_thumbnail_url(get_file_primary_key(file))); let thumbnail_url = liveQuery(() => get_thumbnail_url(get_file_primary_key(file)));
let date_mapping: Observable<Record<string, Date>> = liveQuery(() => let date_mapping: Observable<Record<string, Date>> = liveQuery(() =>
get_date_mapping(get_file_primary_key(file)) get_date_mapping(get_file_primary_key(file))
@@ -151,7 +165,9 @@
function get_main_classes(): string { function get_main_classes(): string {
let out = ''; let out = '';
if ($loading_data?.is_loading) { if (loading_finished) {
out += 'bg-stone-500 text-white/30';
} else if ($loading_data?.is_loading) {
out += 'bg-stone-700 text-white/30'; out += 'bg-stone-700 text-white/30';
} else { } else {
out += get_selectable_color_classes( out += get_selectable_color_classes(
@@ -216,7 +232,7 @@
} }
</script> </script>
<div data-testid="inode" class="flex flex-row h-{$current_height.file} w-full"> <div data-testid="inode" class="flex flex-row h-{$current_height.file} w-full {loading_finished ? 'scale-105' : ''} transition-[scale] duration-300">
{#if !not_interactable} {#if !not_interactable}
<div class="h-{$current_height.file} aspect-square max-w-15 flex"> <div class="h-{$current_height.file} aspect-square max-w-15 flex">
<Button <Button
@@ -275,10 +291,10 @@
> >
{#if $loading_data?.is_loading} {#if $loading_data?.is_loading}
<!-- <div class="pointer-events-none absolute inset-0"> --> <!-- <div class="pointer-events-none absolute inset-0"> -->
<div <div
class="absolute pointer-events-none inset-y-0 left-0 transition-[width] duration-200 bg-stone-600 rounded-r-lg" class="absolute pointer-events-none inset-y-0 left-0 transition-[width] duration-200 bg-stone-600 rounded-r-lg"
style={`width: ${$loading_data.total_percentage}%;`} style={`width: ${$loading_data.total_percentage}%;`}
></div> ></div>
<!-- </div> --> <!-- </div> -->
{/if} {/if}
<div class="flex flex-row gap-2 min-w-0 w-full z-10"> <div class="flex flex-row gap-2 min-w-0 w-full z-10">