From 4dc333de41899f81de39b29bd6c3e4dd01165af9 Mon Sep 17 00:00:00 2001
From: infinite-persistence
 <64950861+infinite-persistence@users.noreply.github.com>
Date: Fri, 14 May 2021 23:00:07 +0800
Subject: [PATCH] Fix blank gif avatars (#6060)

## Issue
6010: hyperchat send display issues with GIF profiles

The FreezeFrameWrapper have no `src` to freeze due to the lazy loading.

## Fix
Delay the freezing by making the lazy-load effect return a state to indicate when then `src` has been loaded.

Since the lazy-loader will `unobserve` after loading, the state will never go back to false, so we don't need to handle the case of preventing `new FreezeFrameWrapper` from being called multiple times from it's effect.
---
 ui/component/fileThumbnail/FreezeframeWrapper.jsx | 10 ++++++----
 ui/effects/use-lazy-loading.js                    |  7 ++++++-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/ui/component/fileThumbnail/FreezeframeWrapper.jsx b/ui/component/fileThumbnail/FreezeframeWrapper.jsx
index c512882f5..33d385cdd 100644
--- a/ui/component/fileThumbnail/FreezeframeWrapper.jsx
+++ b/ui/component/fileThumbnail/FreezeframeWrapper.jsx
@@ -10,11 +10,13 @@ const FreezeframeWrapper = (props) => {
   // eslint-disable-next-line
   const { src, className, children } = props;
 
-  useEffect(() => {
-    freezeframe.current = new Freezeframe(imgRef.current);
-  }, []);
+  const srcLoaded = useLazyLoading(imgRef);
 
-  useLazyLoading(imgRef);
+  useEffect(() => {
+    if (srcLoaded) {
+      freezeframe.current = new Freezeframe(imgRef.current);
+    }
+  }, [srcLoaded]);
 
   return (
     <div className={classnames(className, 'freezeframe-wrapper')}>
diff --git a/ui/effects/use-lazy-loading.js b/ui/effects/use-lazy-loading.js
index 3a1ac73c2..415bdf168 100644
--- a/ui/effects/use-lazy-loading.js
+++ b/ui/effects/use-lazy-loading.js
@@ -1,6 +1,6 @@
 // @flow
 import type { ElementRef } from 'react';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 
 /**
  * Helper React hook for lazy loading images
@@ -13,6 +13,8 @@ export default function useLazyLoading(
   threshold: number = 0.25,
   deps: Array<any> = []
 ) {
+  const [srcLoaded, setSrcLoaded] = React.useState(false);
+
   useEffect(() => {
     if (!elementRef.current) {
       return;
@@ -30,6 +32,7 @@ export default function useLazyLoading(
             if (target.dataset.src) {
               // $FlowFixMe
               target.src = target.dataset.src;
+              setSrcLoaded(true);
               return;
             }
 
@@ -49,4 +52,6 @@ export default function useLazyLoading(
 
     lazyLoadingObserver.observe(elementRef.current);
   }, deps);
+
+  return srcLoaded;
 }