Merge pull request #5142 from matrix-org/t3chguy/hooks/base-avatar

BaseAvatar avoid initial render with default avatar

src/components/views/avatars/BaseAvatar.tsx

@@ -42,34 +42,35 @@ interface IProps {
     className?: string;
 }
 
+const calculateUrls = (url, urls) => {
+    // work out the full set of urls to try to load. This is formed like so:
+    // imageUrls: [ props.url, ...props.urls ]
+
+    let _urls = [];
+    if (!SettingsStore.getValue("lowBandwidth")) {
+        _urls = urls || [];
+
+        if (url) {
+            _urls.unshift(url); // put in urls[0]
+        }
+    }
+
+    // deduplicate URLs
+    return Array.from(new Set(_urls));
+};
+
 const useImageUrl = ({url, urls}): [string, () => void] => {
-    const [imageUrls, setUrls] = useState<string[]>([]);
+    const [imageUrls, setUrls] = useState<string[]>(calculateUrls(url, urls));
-    const [urlsIndex, setIndex] = useState<number>();
+    const [urlsIndex, setIndex] = useState<number>(0);
 
     const onError = useCallback(() => {
         setIndex(i => i + 1); // try the next one
     }, []);
-    const memoizedUrls = useMemo(() => urls, [JSON.stringify(urls)]); // eslint-disable-line react-hooks/exhaustive-deps
 
     useEffect(() => {
-        // work out the full set of urls to try to load. This is formed like so:
+        setUrls(calculateUrls(url, urls));
-        // imageUrls: [ props.url, ...props.urls ]
-
-        let _urls = [];
-        if (!SettingsStore.getValue("lowBandwidth")) {
-            _urls = memoizedUrls || [];
-
-            if (url) {
-                _urls.unshift(url); // put in urls[0]
-            }
-        }
-
-        // deduplicate URLs
-        _urls = Array.from(new Set(_urls));
-
         setIndex(0);
-        setUrls(_urls);
+    }, [url, JSON.stringify(urls)]); // eslint-disable-line react-hooks/exhaustive-deps
-    }, [url, memoizedUrls]); // eslint-disable-line react-hooks/exhaustive-deps
 
     const cli = useContext(MatrixClientContext);
     const onClientSync = useCallback((syncState, prevState) => {