message: BaseAvatar avoid initial render with default avatar
diff: @@ -42,22 +42,13 @@ interface IProps {
  className?: string;
  }
  -const useImageUrl = ({url, urls}): [string, () => void] => {
  - const [imageUrls, setUrls] = useState<string[]>([]);
  - const [urlsIndex, setIndex] = useState<number>();
  -
  - 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(() => {
  +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 = memoizedUrls || [];
  + _urls = urls || [];
  if (url) {
  _urls.unshift(url); // put in urls[0]
  @@ -65,11 +56,21 @@ const useImageUrl = ({url, urls}): [string, () => void] => {
  }
  // deduplicate URLs
  - _urls = Array.from(new Set(_urls));
  + return Array.from(new Set(_urls));
  +};
  +const useImageUrl = ({url, urls}): [string, () => void] => {
  + const [imageUrls, setUrls] = useState<string[]>(calculateUrls(url, urls));
  + const [urlsIndex, setIndex] = useState<number>(0);
  +
  + const onError = useCallback(() => {
  + setIndex(i => i + 1); // try the next one
  + }, []);
  +
  + useEffect(() => {
  + setUrls(calculateUrls(url, urls));
  setIndex(0);
  - setUrls(_urls);
  - }, [url, memoizedUrls]); // eslint-disable-line react-hooks/exhaustive-deps
  + }, [url, JSON.stringify(urls)]); // eslint-disable-line react-hooks/exhaustive-deps
  const cli = useContext(MatrixClientContext);
  const onClientSync = useCallback((syncState, prevState) => {
  