[SHOPTIME-3532] SHOPTIME-1933 앱 첫 진입 시 Hot Picks 랜딩 시 테마 없을 때의 페이지 일시 노출 후 정상 랜딩

원인 : 테마 없다는 문구가 무조건 노출됨
대책 : loading spinner 추가하고, 데이터 로딩이 완료 된 이후 상황에 따라
empty 문구 출력

* 추가 수정: loadingPanel의 type 이 wait 인 경우 해당 스피너가 조금 늦게
  뜨는 현상 수정

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

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

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

@@ -24,6 +24,7 @@ import {
   clearGetProductCouponDownload,
   getProductCouponDownload,
 } from "../../actions/couponActions";
+import { changeAppStatus } from "../../actions/commonActions";
 import { setEventIssueReq } from "../../actions/eventActions";
 import { getThemeCurationInfo } from "../../actions/homeActions";
 import {
@@ -98,7 +99,7 @@ const HotPicksPanel = ({ panelInfo, isOnTop, spotlightId }) => {
   const themeCurationInfoDataRetCode = useSelector(
     (state) => state.home?.themeCurationInfoDataCode
   );
-
+  const showLoadingPanel = useSelector((state) => state.common.appStatus.showLoadingPanel);
   const themeCurationInfoDataRef = usePrevious(themeCurationInfoData);
 
   const { popupVisible, activePopup } = useSelector(
@@ -131,11 +132,13 @@ const HotPicksPanel = ({ panelInfo, isOnTop, spotlightId }) => {
   const [isCurationEvnt, setIsCurationEvnt] = useState(false);
   const [osVersion, setOsVersion] = useState(false);
   const [smsTpCode, setSmsTpCode] = useState(null);
+  const [loading, setLoading] = useState(true);
 
   const expsOrdRef = useRef(null);
   const shopByMobileLogRef = useRef(null);
   const spotYoffsetRef = useRef(0);
   const oneLog = useRef(false);
+  let timerRef = useRef();
 
   const _onScroll = (e) => {
     spotYoffsetRef.current = e.scrollTop;
@@ -269,12 +272,25 @@ const HotPicksPanel = ({ panelInfo, isOnTop, spotlightId }) => {
 
   useEffect(() => {
     dispatch(sendLogGNB(Config.LOG_MENU.HOT_PICKS));
+    return () => {
+      timerRef.current && clearTimeout(timerRef.current);
+    };
   }, []);
 
   useEffect(() => {
+    if (components.length <= 0) {
+      dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } }));
+    }
     dispatch(getThemeCurationInfo());
   }, [dispatch]);
 
+  useEffect(() => {
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      setLoading(showLoadingPanel.show);
+    }, 100);
+  }, [dispatch, showLoadingPanel]);
+  
   useEffect(() => {
     if (
       themeCurationInfoData &&
@@ -769,15 +785,13 @@ const HotPicksPanel = ({ panelInfo, isOnTop, spotlightId }) => {
         scrollOptions={{ noScrollByWheel: true }}
         spotlightDisabled={!isOnTop}
       >
-        {components.length > 0 ? (
-          components.map((component, index) => (
-            <Container key={index} className={css.sectionWrap}>
-              {currentPage === index && component}
-            </Container>
-          ))
-        ) : (
-          <NoDataType />
-        )}
+        {components.length > 0
+          ? components.map((component, index) => (
+              <Container key={index} className={css.sectionWrap}>
+                {currentPage === index && component}
+              </Container>
+            ))
+          : !loading && <NoDataType />}
       </TBody>
 
       {currentPage < themeCurationInfoData?.length - 1 && (

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

@@ -146,6 +146,9 @@ export default function LoadingPanel({ showLoadingPanel, ...rest }) {
 
       setShowingStatus({ showing: true, hiding: false });
       setLoadingType(showLoadingPanel.type);
+      if (showLoadingPanel.type === "wait") {
+        setIsVisible(true);
+      }
     }
   }, [showLoadingPanel]);