olaren.dev
forked from
pds.ls/pdsls
atmosphere explorer
cleanup img blob loading
handle.invalid
+16
-22
src/components/json.tsx
+16
-22
src/components/json.tsx
···
3
3
import {
4
4
createContext,
5
5
createEffect,
6
+
createResource,
6
7
createSignal,
7
8
ErrorBoundary,
8
9
For,
9
10
on,
10
-
onCleanup,
11
-
onMount,
12
11
Show,
13
12
useContext,
14
13
} from "solid-js";
···
263
262
(blob.mimeType.startsWith("image/") || blob.mimeType === "video/mp4");
264
263
265
264
const MediaDisplay = () => {
266
-
const [imageObjectUrl, setImageObjectUrl] = createSignal<string>();
265
+
const [imageUrl] = createResource(
266
+
() => (blob.mimeType.startsWith("image/") ? blob.ref.$link : null),
267
+
async (cid) => {
268
+
const url = `https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${ctx.repo}&cid=${cid}`;
267
269
268
-
onMount(() => {
269
-
if (blob.mimeType.startsWith("image/")) {
270
-
const fetchImage = async () => {
271
-
const res = await fetch(
272
-
`https://${pds()}/xrpc/com.atproto.sync.getBlob?did=${ctx.repo}&cid=${blob.ref.$link}`,
273
-
);
274
-
if (!res.ok) throw new Error(res.statusText);
275
-
const blobData = await res.blob();
276
-
const url = URL.createObjectURL(blobData);
277
-
setImageObjectUrl(url);
278
-
};
279
-
fetchImage().catch((err) => console.error("Failed to load image:", err));
280
-
}
281
-
});
270
+
await new Promise<void>((resolve) => {
271
+
const img = new Image();
272
+
img.src = url;
273
+
img.onload = () => resolve();
274
+
img.onerror = () => resolve();
275
+
});
282
276
283
-
onCleanup(() => {
284
-
if (imageObjectUrl()) URL.revokeObjectURL(imageObjectUrl()!);
285
-
});
277
+
return url;
278
+
},
279
+
);
286
280
287
281
return (
288
282
<div>
···
290
284
<Show when={!hide()}>
291
285
<Show when={blob.mimeType.startsWith("image/")}>
292
286
<Show
293
-
when={imageObjectUrl()}
287
+
when={!imageUrl.loading && imageUrl()}
294
288
fallback={
295
289
<div class="flex h-48 w-48 items-center justify-center rounded bg-neutral-200 dark:bg-neutral-800">
296
290
<span class="iconify lucide--loader-circle animate-spin text-xl text-neutral-400 dark:text-neutral-500"></span>
···
299
293
>
300
294
<img
301
295
class="h-auto max-h-48 max-w-64 object-contain"
302
-
src={imageObjectUrl()}
296
+
src={imageUrl()}
303
297
onLoad={() => setMediaLoaded(true)}
304
298
/>
305
299
</Show>