From 753781ad1af341c86d2301f331a472151a0580ed Mon Sep 17 00:00:00 2001
From: hole-thu <hole_thu@riseup.net>
Date: Thu, 31 Mar 2022 00:19:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=9B=BE=E7=89=87=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E6=97=B6=E7=9A=84=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Common.css |  7 +++++++
 src/Common.js  | 20 ++++++++++++++------
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/Common.css b/src/Common.css
index 08bbf0a..d78d138 100644
--- a/src/Common.css
+++ b/src/Common.css
@@ -65,6 +65,13 @@
   margin: 0 auto;
 }
 
+.ext-img__warpper.loading {
+  min-height: 100px;
+  background: url('/static/loading.gif') center no-repeat;
+  background-size: 25px 25px;
+  display: block;
+}
+
 .left-container .img-link img {
   max-height: 500px;
 }
diff --git a/src/Common.js b/src/Common.js
index 5ef41e1..d1c99d7 100644
--- a/src/Common.js
+++ b/src/Common.js
@@ -77,6 +77,10 @@ function normalize_url(url) {
   return /^https?:\/\//.test(url) ? url : 'http://' + url;
 }
 
+function stop_loading(e) {
+  e.target.parentNode.classList.remove('loading');
+}
+
 // props: text, show_pid, color_picker, search_param
 export class HighlightedMarkdown extends Component {
   render() {
@@ -96,12 +100,16 @@ export class HighlightedMarkdown extends Component {
         shouldProcessNode: (node) => node.name === 'img',
         processNode(node, index) {
           return (
-            <img
-              src={normalize_url(node.attribs.src)}
-              alt={node.alt}
-              className="ext-img"
-              referrerPolicy="no-referrer"
-            />
+            <span className="ext-img__warpper loading">
+              <img
+                src={normalize_url(node.attribs.src)}
+                alt={node.alt}
+                className="ext-img"
+                referrerPolicy="no-referrer"
+                onError={stop_loading}
+                onLoad={stop_loading}
+              />
+            </span>
           );
         },
       },