nostr/primal-web-app
1
0
Fork 0
mirror of https://github.com/PrimalHQ/primal-web-app.git synced 2024-10-03 02:10:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add a placeholder for non-cached images to minimize thread jumping

Browse Source
This commit is contained in:
Bojan Mojsilovic 2024-01-10 14:12:36 +01:00
parent b0c2b394e0
commit 1a5bd99742
2 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/NoteImage/NoteImage.module.scss
View File

@ -7,3 +7,10 @@
.shortHeight { .shortHeight {
max-height: 680px; max-height: 680px;
} }
.placeholderImage {
display: block;
width: 524px;
height: 680px;
background-color: var(--background-site);
}

5
src/components/NoteImage/NoteImage.tsx
View File

@ -101,7 +101,10 @@ const NoteImage: Component<{
}) })
return ( return (
<Show when={isImageLoaded()}> <Show
when={isImageLoaded()}
fallback={<div class={styles.placeholderImage}></div>}
>
<a <a
class={`${props.class || ''} ${props.plainBorder ? '' : 'roundedImage'}`} class={`${props.class || ''} ${props.plainBorder ? '' : 'roundedImage'}`}
href={src()} href={src()}