Fix external avatar loading flow

3 files changed, 22 insertions, 18 deletions

diff --git a/vnext/src/ui/Thread.js b/vnext/src/ui/Thread.js
index ec8a1eda..9d22200c 100644
--- a/vnext/src/ui/Thread.js
+++ b/vnext/src/ui/Thread.js
@@ -45,22 +45,20 @@ function Comment({ msg, draft, visitor, active, setActive, onStartEditing, postC
       }
     }
   }, []);
-  useEffect(() => {
-    isMounted = true;
-    setAuthor(previous => {
-      if (previous.uri) {
-        fetchUserUri(previous.uri).then(response => {
-          if (isMounted) {
-            return response.data;
-          }
-        });
-      }
-      return previous;
-    });
-    return () => {
-      isMounted = false;
-    };
-  }, []);
+  const userRef = useRef(author);
+    useEffect(() => {
+        isMounted = true;
+        if (userRef.current.uri) {
+            fetchUserUri(userRef.current.uri).then(response => {
+                if (isMounted) {
+                    setAuthor(response.data);
+                }
+            });
+        }
+        return () => {
+            isMounted = false;
+        };
+    }, [msg.user]);
   return (
     <div style={chatItemStyle(visitor, msg)}>
       <div className="msg-header">
diff --git a/vnext/src/ui/UserInfo.js b/vnext/src/ui/UserInfo.js
index 0be93bb8..f44fb77c 100644
--- a/vnext/src/ui/UserInfo.js
+++ b/vnext/src/ui/UserInfo.js
@@ -6,6 +6,8 @@ import { info, fetchUserUri, update } from '../api';
 import Avatar from './Avatar';
 import Icon from './Icon';
 import SearchBox from './SearchBox';
+// @ts-ignore
+import defaultAvatar from './assets/av-96.png';
 
 import './UserInfo.css';
 
@@ -110,7 +112,11 @@ export function UserLink(props) {
     }, [props.user]);
     return (
         user.uid ?
-            <Link key={user.uid} to={`/${user.uname}/`} className="info-avatar"><img src={user.avatar} />{user.uname}</Link>
-            : <a href={user.uri} className="info-avatar"><img src={user.avatar} />{user.uname}</a>
+            <Link key={user.uid} to={`/${user.uname}/`} className="info-avatar">
+                <img src={user.avatar} />{user.uname}
+            </Link>
+            : <a href={user.uri} className="info-avatar">
+                <img src={user.avatar || defaultAvatar} />{user.uname}
+            </a>
     );
 }
diff --git a/vnext/src/ui/assets/av-96.png b/vnext/src/ui/assets/av-96.png
new file mode 100644
index 00000000..911c0522
--- /dev/null
+++ b/vnext/src/ui/assets/av-96.png