From e4a3e5461364be7a9cd1475ca31706353b56891f Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Wed, 14 Apr 2021 15:02:02 -0400
Subject: [PATCH] move lazy loading effect into effects/

---
 ui/component/channelThumbnail/view.jsx                |  2 +-
 ui/component/fileThumbnail/FreezeframeWrapper.jsx     |  2 +-
 ui/component/fileThumbnail/view.jsx                   |  2 +-
 .../useLazyLoading.js => effects/use-lazy-loading.js} | 11 ++++++++---
 4 files changed, 11 insertions(+), 6 deletions(-)
 rename ui/{util/useLazyLoading.js => effects/use-lazy-loading.js} (84%)

diff --git a/ui/component/channelThumbnail/view.jsx b/ui/component/channelThumbnail/view.jsx
index e48a8c46c..acca9c1a0 100644
--- a/ui/component/channelThumbnail/view.jsx
+++ b/ui/component/channelThumbnail/view.jsx
@@ -5,7 +5,7 @@ import classnames from 'classnames';
 import Gerbil from './gerbil.png';
 import FreezeframeWrapper from 'component/fileThumbnail/FreezeframeWrapper';
 import ChannelStakedIndicator from 'component/channelStakedIndicator';
-import useLazyLoading from '../../util/useLazyLoading';
+import useLazyLoading from 'effects/use-lazy-loading';
 
 type Props = {
   thumbnail: ?string,
diff --git a/ui/component/fileThumbnail/FreezeframeWrapper.jsx b/ui/component/fileThumbnail/FreezeframeWrapper.jsx
index d255c3a4e..c512882f5 100644
--- a/ui/component/fileThumbnail/FreezeframeWrapper.jsx
+++ b/ui/component/fileThumbnail/FreezeframeWrapper.jsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import Freezeframe from './FreezeframeLite';
-import useLazyLoading from '../../util/useLazyLoading';
+import useLazyLoading from 'effects/use-lazy-loading';
 
 const FreezeframeWrapper = (props) => {
   const imgRef = React.useRef();
diff --git a/ui/component/fileThumbnail/view.jsx b/ui/component/fileThumbnail/view.jsx
index f5920d090..05f2c6bb4 100644
--- a/ui/component/fileThumbnail/view.jsx
+++ b/ui/component/fileThumbnail/view.jsx
@@ -5,7 +5,7 @@ import React from 'react';
 import FreezeframeWrapper from './FreezeframeWrapper';
 import Placeholder from './placeholder.png';
 import classnames from 'classnames';
-import useLazyLoading from '../../util/useLazyLoading';
+import useLazyLoading from 'effects/use-lazy-loading';
 
 type Props = {
   uri: string,
diff --git a/ui/util/useLazyLoading.js b/ui/effects/use-lazy-loading.js
similarity index 84%
rename from ui/util/useLazyLoading.js
rename to ui/effects/use-lazy-loading.js
index e1582998b..3a1ac73c2 100644
--- a/ui/util/useLazyLoading.js
+++ b/ui/effects/use-lazy-loading.js
@@ -1,3 +1,5 @@
+// @flow
+import type { ElementRef } from 'react';
 import { useEffect } from 'react';
 
 /**
@@ -6,7 +8,11 @@ import { useEffect } from 'react';
  * @param {Number} [threshold=0.5] - The percent visible in order for loading to begin.
  * @param {Array<>} [deps=[]] - The dependencies this lazy-load is reliant on.
  */
-export default function useLazyLoading(elementRef, threshold = 0.25, deps = []) {
+export default function useLazyLoading(
+  elementRef: { current: ?ElementRef<any> },
+  threshold: number = 0.25,
+  deps: Array<any> = []
+) {
   useEffect(() => {
     if (!elementRef.current) {
       return;
@@ -22,6 +28,7 @@ export default function useLazyLoading(elementRef, threshold = 0.25, deps = [])
 
             // useful for lazy loading img tags
             if (target.dataset.src) {
+              // $FlowFixMe
               target.src = target.dataset.src;
               return;
             }
@@ -41,7 +48,5 @@ export default function useLazyLoading(elementRef, threshold = 0.25, deps = [])
     );
 
     lazyLoadingObserver.observe(elementRef.current);
-
-    // re-run whenever the element ref changes
   }, deps);
 }