[PlayerPanel] tabCotents loading component change

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContaienr.jsx

@@ -76,12 +76,14 @@ export default function TabContainer({
           setIsChatVisible={setIsChatVisible}
           playListInfo={playListInfo && playListInfo[selectedIndex]}
           panelInfo={panelInfo}
+          tabIndex={tab}
         />
       )}
       {panelInfo?.shptmBanrTpNm === "VOD" && tab === 1 && (
         <FeaturedShowContents
           featuredShowsInfos={playListInfo}
           setSelectedIndex={setSelectedIndex}
+          tabIndex={tab}
         />
       )}
       {panelInfo?.shptmBanrTpNm === "LIVE" && tab === 1 && liveChannelInfos && (
@@ -89,6 +91,7 @@ export default function TabContainer({
           selectedIndex={selectedIndex}
           setSelectedIndex={setSelectedIndex}
           liveInfos={playListInfo}
+          tabIndex={tab}
         />
       )}
 

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx

@@ -9,13 +9,14 @@ import { updatePanel } from "../../../../actions/panelActions";
 import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
 import { panel_names } from "../../../../utils/Config";
 import { $L } from "../../../../utils/helperMethods";
+import ListEmptyContents from "../../../ImagePanel/ImageSideContents/ListEmptyContents/ListEmptyContents";
 import PlayerItemCard, { TYPES } from "../../PlayerItemCard/PlayerItemCard";
 import css from "./LiveChannelContents.module.less";
-import PlayerTabLoading from "./PlayerTabLoading";
 
 export default function FeaturedShowContents({
   featuredShowsInfos,
   setSelectedIndex,
+  tabIndex,
 }) {
   const dispatch = useDispatch();
 
@@ -83,7 +84,7 @@ export default function FeaturedShowContents({
             noScrollByWheel={false}
           />
         ) : (
-          <PlayerTabLoading textType={$L("Show")} />
+          <ListEmptyContents tabIndex={tabIndex} />
         )}
       </div>
     </>

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx

@@ -7,14 +7,15 @@ import Spotlight from "@enact/spotlight";
 import { updatePanel } from "../../../../actions/panelActions";
 import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
 import { panel_names } from "../../../../utils/Config";
+import ListEmptyContents from "../../../ImagePanel/ImageSideContents/ListEmptyContents/ListEmptyContents";
 import PlayerItemCard, { TYPES } from "../../PlayerItemCard/PlayerItemCard";
 import css from "./LiveChannelContents.module.less";
-import PlayerTabLoading from "./PlayerTabLoading";
 
 export default function LiveChannelContents({
   liveInfos,
   selectedIndex,
   setSelectedIndex,
+  tabIndex,
 }) {
   const dispatch = useDispatch();
 
@@ -78,7 +79,7 @@ export default function LiveChannelContents({
             noScrollByWheel={false}
           />
         ) : (
-          <PlayerTabLoading textType={$L("Show")} />
+          <ListEmptyContents tabIndex={tabIndex} />
         )}
       </div>
     </>

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/PlayerTabLoading.jsx

@@ -1,16 +0,0 @@
-import React from "react";
-
-import loading from "../../../../../assets/images/img-contents-loading@3x.png";
-import { $L } from "../../../../utils/helperMethods";
-import css from "./PlayerTabLoading.module.less";
-
-export default function PlayerTabLoading(textType) {
-  return (
-    <div className={css.loadingContainer}>
-      <img src={loading} alt="" />
-      <div>
-        {$L("Loading") + " " + textType + " " + "Details. Please Wait..."}
-      </div>
-    </div>
-  );
-}

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/PlayerTabLoading.module.less

@@ -1,21 +0,0 @@
-@import "../../../../style/utils.module.less";
-
-.loadingContainer {
-  height: 250px;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  font-size: 30px;
-  line-height: 1.4;
-  color: #8290a0;
-  margin-top: 60px;
-
-  > img {
-    .size(@w: 360px , @h: 174px);
-  }
-
-  > div {
-    .size(@w: 311px , @h: 80px);
-    text-align: center;
-  }
-}

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx

@@ -12,7 +12,7 @@ import TItemCard, {
 } from "../../../../components/TItemCard/TItemCard";
 import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
 import { panel_names } from "../../../../utils/Config";
-import PlayerTabLoading from "./PlayerTabLoading";
+import ListEmptyContents from "../../../ImagePanel/ImageSideContents/ListEmptyContents/ListEmptyContents";
 import css from "./ShopNowContents.module.less";
 
 const Container = SpotlightContainerDecorator(
@@ -25,6 +25,7 @@ export default function ShopNowContents({
   setIsChatVisible,
   playListInfo,
   panelInfo,
+  tabIndex,
 }) {
   const dispatch = useDispatch();
   const [height, setHeight] = useState();
@@ -116,7 +117,7 @@ export default function ShopNowContents({
             noScrollByWheel={false}
           />
         ) : (
-          <PlayerTabLoading textType={$L("Product")} />
+          <ListEmptyContents tabIndex={tabIndex} />
         )}
       </Container>
     </>

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/YouMayLikeContents.jsx

@@ -1,23 +1,13 @@
-import React, {
+import React, { useCallback, useEffect, useMemo, useState } from "react";
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
 
-import {
+import { useDispatch, useSelector } from "react-redux";
-  useDispatch,
-  useSelector,
-} from 'react-redux';
 
-import { pushPanel } from '../../../../actions/panelActions';
+import { pushPanel } from "../../../../actions/panelActions";
-import TItemCard, { TYPES } from '../../../../components/TItemCard/TItemCard';
+import TItemCard, { TYPES } from "../../../../components/TItemCard/TItemCard";
-import TVirtualGridList
+import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
-  from '../../../../components/TVirtualGridList/TVirtualGridList';
+import { panel_names } from "../../../../utils/Config";
-import { panel_names } from '../../../../utils/Config';
+import { $L } from "../../../../utils/helperMethods";
-import { $L } from '../../../../utils/helperMethods';
+import css from "./YouMayLikeContents.module.less";
-import PlayerTabLoading from './PlayerTabLoading';
-import css from './YouMayLikeContents.module.less';
 
 export default function YouMayLikeContents({ shopNowInfo }) {
   const dispatch = useDispatch();