파일 페이지에서의 네트워크 호출 최적화

This commit is contained in:
static
2025-12-30 23:30:50 +09:00
parent b5522a4c6d
commit e4413ddbf6
24 changed files with 521 additions and 618 deletions

View File

@@ -1,7 +1,5 @@
<script lang="ts">
import { untrack } from "svelte";
import { get, type Writable } from "svelte/store";
import { fileDownloadStatusStore, isFileDownloading, type FileDownloadStatus } from "$lib/stores";
import { getDownloadingFiles } from "$lib/modules/file";
interface Props {
onclick: () => void;
@@ -9,23 +7,7 @@
let { onclick }: Props = $props();
let downloadingFiles: Writable<FileDownloadStatus>[] = $state([]);
$effect(() => {
downloadingFiles = $fileDownloadStatusStore.filter((status) =>
isFileDownloading(get(status).status),
);
return untrack(() => {
const unsubscribes = downloadingFiles.map((downloadingFile) =>
downloadingFile.subscribe(({ status }) => {
if (!isFileDownloading(status)) {
downloadingFiles = downloadingFiles.filter((file) => file !== downloadingFile);
}
}),
);
return () => unsubscribes.forEach((unsubscribe) => unsubscribe());
});
});
let downloadingFiles = $derived(getDownloadingFiles());
</script>
{#if downloadingFiles.length > 0}

View File

@@ -1,17 +1,18 @@
<script lang="ts">
import type { Writable } from "svelte/store";
import { onMount } from "svelte";
import { goto } from "$app/navigation";
import { EntryButton, FileThumbnailButton } from "$lib/components/atoms";
import { getFileInfo, type FileInfo } from "$lib/modules/filesystem";
import { getFileInfo, type FileInfo } from "$lib/modules/filesystem2.svelte";
import { masterKeyStore } from "$lib/stores";
import { requestFreshMediaFilesRetrieval } from "./service";
let mediaFiles: Writable<FileInfo | null>[] = $state([]);
let mediaFiles: (FileInfo | null)[] = $state([]);
$effect(() => {
requestFreshMediaFilesRetrieval().then((files) => {
mediaFiles = files.map(({ id }) => getFileInfo(id, $masterKeyStore?.get(1)?.key!));
});
onMount(async () => {
const files = await requestFreshMediaFilesRetrieval();
mediaFiles = await Promise.all(
files.map(({ id }) => getFileInfo(id, $masterKeyStore?.get(1)?.key!)),
);
});
</script>
@@ -28,7 +29,9 @@
{#if mediaFiles.length > 0}
<div class="grid grid-cols-4 gap-2 p-2">
{#each mediaFiles as file}
<FileThumbnailButton info={file} onclick={({ id }) => goto(`/file/${id}`)} />
{#if file}
<FileThumbnailButton info={file} onclick={({ id }) => goto(`/file/${id}`)} />
{/if}
{/each}
</div>
{/if}