From ec3ebb91c08a7b03034e49e308dbce0a014ebc79 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom@getoutline.com>
Date: Wed, 29 Mar 2023 23:12:55 -0400
Subject: [PATCH] Adds placeholder during image loading (#5120

* Adds placeholder during image loading

* Small refactor
---
 shared/editor/components/Image.tsx | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/shared/editor/components/Image.tsx b/shared/editor/components/Image.tsx
index e231c6c4c..d4017db88 100644
--- a/shared/editor/components/Image.tsx
+++ b/shared/editor/components/Image.tsx
@@ -24,6 +24,7 @@ const Image = (
   const [contentWidth, setContentWidth] = React.useState(
     () => document.body.querySelector("#full-width-container")?.clientWidth || 0
   );
+  const [loaded, setLoaded] = React.useState(false);
   const [naturalWidth, setNaturalWidth] = React.useState(node.attrs.width);
   const [naturalHeight, setNaturalHeight] = React.useState(node.attrs.height);
   const [size, setSize] = React.useState({
@@ -175,7 +176,10 @@ const Image = (
         )}
         <ImageZoom zoomMargin={24}>
           <img
-            style={widthStyle}
+            style={{
+              ...widthStyle,
+              display: loaded ? "block" : "none",
+            }}
             src={sanitizeUrl(src) ?? ""}
             onLoad={(ev: React.SyntheticEvent<HTMLImageElement>) => {
               // For some SVG's Firefox does not provide the naturalWidth, in this
@@ -185,6 +189,7 @@ const Image = (
               const nh = (ev.target as HTMLImageElement).naturalHeight;
               setNaturalWidth(nw);
               setNaturalHeight(nh);
+              setLoaded(true);
 
               if (!node.attrs.width) {
                 setSize((state) => ({
@@ -194,6 +199,15 @@ const Image = (
               }
             }}
           />
+          <img
+            style={{
+              ...widthStyle,
+              display: loaded ? "none" : "block",
+            }}
+            src={`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(
+              getPlaceholder(size.width, size.height)
+            )}`}
+          />
         </ImageZoom>
         {isEditable && !isFullWidth && isResizable && (
           <>
@@ -215,6 +229,10 @@ const Image = (
   );
 };
 
+function getPlaceholder(width: number, height: number) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" />`;
+}
+
 export const Caption = styled.p`
   border: 0;
   display: block;