olaren.dev
forked from
pds.ls/pdsls
atmosphere explorer
adjust image size and skeleton
handle.invalid
+15
-6
+15
-6
src/components/json.tsx
+15
-6
src/components/json.tsx
···
288
288
<div>
289
289
<span class="group/media relative flex w-fit">
290
290
<Show when={!hide()}>
291
-
<Show when={blob.mimeType.startsWith("image/") && imageObjectUrl()}>
292
-
<img
293
-
class="h-auto max-h-48 max-w-48 object-contain sm:max-h-64 sm:max-w-64"
294
-
src={imageObjectUrl()}
295
-
onLoad={() => setMediaLoaded(true)}
296
-
/>
291
+
<Show when={blob.mimeType.startsWith("image/")}>
292
+
<Show
293
+
when={imageObjectUrl()}
294
+
fallback={
295
+
<div class="flex h-48 w-48 items-center justify-center rounded bg-neutral-100 dark:bg-neutral-800">
296
+
<span class="iconify lucide--loader-circle animate-spin text-xl text-neutral-400 dark:text-neutral-500"></span>
297
+
</div>
298
+
}
299
+
>
300
+
<img
301
+
class="h-auto max-h-48 max-w-64 object-contain"
302
+
src={imageObjectUrl()}
303
+
onLoad={() => setMediaLoaded(true)}
304
+
/>
305
+
</Show>
297
306
</Show>
298
307
<Show when={blob.mimeType === "video/mp4"}>
299
308
<ErrorBoundary fallback={() => <span>Failed to load video</span>}>