mirror of
https://github.com/kmc7468/arkvault.git
synced 2026-02-04 16:16:55 +00:00
파일 페이지에서의 네트워크 호출 최적화
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user