homepanel infinite loadingbar / hotpickspanel resource image call

com.twin.app.shoptime/src/actions/homeActions.js

@@ -139,10 +139,12 @@ export const getHomeLayout = () => (dispatch, getState) => {
       type: types.GET_HOME_LAYOUT,
       payload: response.data.data,
     });
+    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
   };
 
   const onFail = (error) => {
     console.error("getHomeLayout onFail", error);
+    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
   };
 
   TAxios(
@@ -167,10 +169,13 @@ export const getHomeMainContents = () => (dispatch, getState) => {
       payload: response.data.data,
       status: "fulfilled",
     });
+
+    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
   };
 
   const onFail = (error) => {
     console.error("getHomeMainContents onFail", error);
+    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
   };
 
   TAxios(

com.twin.app.shoptime/src/actions/mainActions.js

@@ -279,10 +279,12 @@ export const getTop20Show = () => (dispatch, getState) => {
       type: types.GET_TOP_20_SHOW,
       payload: response.data.data,
     });
+    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
   };
 
   const onFail = (error) => {
     console.error("getTop20Show onFail", error);
+    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
   };
 
   TAxios(

com.twin.app.shoptime/src/actions/onSaleActions.js

@@ -17,10 +17,12 @@ export const getHomeOnSaleInfo = (props) => (dispatch, getState) => {
         data: response.data.data,
       },
     });
+    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
   };
 
   const onFail = (error) => {
     console.error("getHomeOnSaleInfo onFail", error);
+    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
   };
 
   TAxios(

com.twin.app.shoptime/src/actions/productActions.js

@@ -1,6 +1,7 @@
 import { URLS } from "../api/apiConfig";
 import { TAxios } from "../api/TAxios";
 import { types } from "./actionTypes";
+import { changeAppStatus } from "./commonActions";
 
 // Best Seller 상품 목록 조회 IF-LGSP-303
 export const getBestSeller = (callback) => (dispatch, getState) => {
@@ -11,14 +12,18 @@ export const getBestSeller = (callback) => (dispatch, getState) => {
       type: types.GET_BEST_SELLER,
       payload: response.data.data,
     });
-    if(callback){
+    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
+
+    if (callback) {
       callback();
     }
   };
 
   const onFail = (error) => {
     console.error("getBestSeller onFail", error);
-    if(callback){
+    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
+
+    if (callback) {
       callback();
     }
   };

com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx

@@ -115,7 +115,6 @@ export default function HomePanel({ isOnTop }) {
   const [focusedContainerId, setFocusedContainerId] = useState(
     panelInfo.focusedContainerId
   );
-  const [initialLoadDone, setInitialLoadDone] = useState(false);
 
   const isInitialRender = useRef(true);
   const verticalPagenatorRef = useRef(null);
@@ -400,8 +399,6 @@ export default function HomePanel({ isOnTop }) {
         dispatch(getTop20Show());
         dispatch(getBestSeller(bestSellerLoaded));
 
-        setInitialLoadDone(true);
-
         if (isDeepLink) {
           dispatch(setDeepLink(false));
         }

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.jsx

@@ -196,6 +196,7 @@ export default function TCFI({
     },
     [onSpotlightDown]
   );
+
   const _onSpotlightUp = useCallback(
     (ev) => {
       ev.stopPropagation();

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.jsx

@@ -1,32 +1,28 @@
 import React, {
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
-} from 'react';
+} from "react";
 
-import classNames from 'classnames';
-import { useDispatch } from 'react-redux';
+import classNames from "classnames";
+import { useDispatch } from "react-redux";
 
-import { Job } from '@enact/core/util';
-import SpotlightContainerDecorator
-  from '@enact/spotlight/SpotlightContainerDecorator';
-import Spottable from '@enact/spotlight/Spottable';
+import { Job } from "@enact/core/util";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";
 
-import defaultImageItem
-  from '../../../../../assets/images/img-thumb-empty-product@3x.png';
-import {
-  pushPanel,
-  updatePanel,
-} from '../../../../actions/panelActions';
+import defaultImageItem from "../../../../../assets/images/img-thumb-empty-product@3x.png";
+import { pushPanel, updatePanel } from "../../../../actions/panelActions";
 import {
   finishVideoPreview,
   startVideoPlayer,
-} from '../../../../actions/playActions';
-import CustomImage from '../../../../components/CustomImage/CustomImage';
-import usePrevious from '../../../../hooks/usePrevious';
-import { panel_names } from '../../../../utils/Config';
-import css from './TCFV_3.module.less';
+} from "../../../../actions/playActions";
+import CustomImage from "../../../../components/CustomImage/CustomImage";
+import usePrevious from "../../../../hooks/usePrevious";
+import { panel_names } from "../../../../utils/Config";
+import css from "./TCFV_3.module.less";
 
 const SpottableComponent = Spottable("li");
 const SpottableComponentDiv = Spottable("div");
@@ -177,6 +173,11 @@ export default function TCFV_3({
       })
     );
   }, [videoFocused, dispatch]);
+
+  const getBackgroundStyle = useCallback((bgImgPath) => {
+    return bgImgPath ? { backgroundImage: `url(${bgImgPath})` } : {};
+  }, []);
+
   return (
     <>
       {data &&
@@ -186,7 +187,7 @@ export default function TCFV_3({
               <div
                 key={tmpltCd}
                 className={classNames(className && className, css.flexCont)}
-                style={{ backgroundImage: "url(" + bgImgPath + ")" }}
+                style={getBackgroundStyle(bgImgPath)}
               >
                 <div className={css.fullImg}>
                   {showInfos &&