[FeaturedBrandsPanel] edited, LiveVideoCard.jsx

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannelsVerticalContents/LiveVideoCard/LiveVideoCard.jsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback } from "react";
+import React, { memo, useCallback, useEffect, useState } from "react";
 
 import classNames from "classnames";
 
@@ -18,8 +18,11 @@ export default memo(function LiveVideoCard({
   onBlur,
   onClick,
   onFocus,
+  onLoad,
   ...rest
 }) {
+  const [imageLoaded, setIsImageLoaded] = useState(false);
+
   const { endDt, showNm, strtDt, thumbnailImgPath, vtctpYn } = itemInfo;
 
   const ariaLabel = "LIVE SHOW " + showNm;
@@ -43,6 +46,14 @@ export default memo(function LiveVideoCard({
     }
   }, [onFocus]);
 
+  const _onLoad = useCallback(() => {
+    setIsImageLoaded(true);
+
+    if (onLoad) {
+      onLoad();
+    }
+  }, [onLoad]);
+
   return (
     <SpottableComponent
       className={classNames(css.card, isFocused && css.shadow)}
@@ -58,7 +69,12 @@ export default memo(function LiveVideoCard({
           isVertical ? css.vertical : css.horizontal
         )}
       >
-        <CustomImage src={thumbnailImgPath} alt={showNm} ariaLabel={showNm} />
+        <CustomImage
+          src={thumbnailImgPath}
+          alt={showNm}
+          ariaLabel={showNm}
+          onLoad={_onLoad}
+        />
       </figure>
 
       <div className={css.videoInfo}>
@@ -69,7 +85,7 @@ export default memo(function LiveVideoCard({
         </time>
       </div>
 
-      <div className={css.darkGradient} />
+      {imageLoaded && <div className={css.darkGradient} />}
     </SpottableComponent>
   );
 });