From 1a5bd99742cacaa1887fec09db4d58bda1907bb6 Mon Sep 17 00:00:00 2001
From: Bojan Mojsilovic <bmojsilovic@itekako.com>
Date: Wed, 10 Jan 2024 14:12:36 +0100
Subject: [PATCH] Add a placeholder for non-cached images to minimize thread
 jumping

---
 src/components/NoteImage/NoteImage.module.scss | 7 +++++++
 src/components/NoteImage/NoteImage.tsx         | 5 ++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/NoteImage/NoteImage.module.scss b/src/components/NoteImage/NoteImage.module.scss
index a4c9893..540870a 100644
--- a/src/components/NoteImage/NoteImage.module.scss
+++ b/src/components/NoteImage/NoteImage.module.scss
@@ -7,3 +7,10 @@
 .shortHeight {
   max-height: 680px;
 }
+
+.placeholderImage {
+  display: block;
+  width: 524px;
+  height: 680px;
+  background-color: var(--background-site);
+}
diff --git a/src/components/NoteImage/NoteImage.tsx b/src/components/NoteImage/NoteImage.tsx
index 6248759..f7a5a28 100644
--- a/src/components/NoteImage/NoteImage.tsx
+++ b/src/components/NoteImage/NoteImage.tsx
@@ -101,7 +101,10 @@ const NoteImage: Component<{
   })
 
   return (
-    <Show when={isImageLoaded()}>
+    <Show
+      when={isImageLoaded()}
+      fallback={<div class={styles.placeholderImage}></div>}
+    >
       <a
         class={`${props.class || ''} ${props.plainBorder ? '' : 'roundedImage'}`}
         href={src()}