From aaf7d68bb0673ece64cd44f71d919fa3a01077f6 Mon Sep 17 00:00:00 2001 From: yonghyon Date: Wed, 2 Oct 2024 12:23:10 +0900 Subject: [PATCH] =?UTF-8?q?[SHOPTIME-2753]=20Launching=20Animation=20?= =?UTF-8?q?=EB=81=8A=EA=B9=80=20=ED=98=84=EC=83=81=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EC=9B=90=EC=9D=B8=20:=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4?= =?UTF-8?q?=EC=85=98=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EC=9D=98=20=EC=B2=AB?= =?UTF-8?q?=ED=94=84=EB=A0=88=EC=9E=84=EA=B3=BC=20=EB=A7=88=EC=A7=80?= =?UTF-8?q?=EB=A7=89=20=ED=94=84=EB=A0=88=EC=9E=84=EC=9D=84=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC=ED=95=98=EC=97=AC=20=ED=83=80=EC=9D=B4=EB=B0=8D=20?= =?UTF-8?q?=EB=B3=84=EB=A1=9C=203=EB=8B=A8=EA=B3=84=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=95=20=ED=95=98=EB=8A=94=EB=8D=B0=20=EB=A7=88=EC=A7=80?= =?UTF-8?q?=EB=A7=89=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EB=A5=BC=20=ED=91=9C?= =?UTF-8?q?=EA=B8=B0=ED=95=98=EB=8A=94=20=ED=83=80=EC=9D=B4=EB=B0=8D?= =?UTF-8?q?=EC=9D=B4=20=EC=8B=A4=EC=A0=9C=20=EC=95=A0=EB=8B=88=EB=A9=94?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=8B=9C=EA=B0=84=EA=B3=BC=20=EB=A7=9E?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EC=9D=8C=20=EB=8C=80=EC=B1=85:=20?= =?UTF-8?q?=EB=A7=88=EC=A7=80=EB=A7=89=20=EC=9D=B4=EB=AF=B8=EC=A7=80?= =?UTF-8?q?=EB=8A=94=20=EA=B5=90=EC=B2=B4=20=ED=95=84=EC=9A=94=EC=97=86?= =?UTF-8?q?=EC=9D=8C.=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20?= =?UTF-8?q?=EC=A2=85=EB=A3=8C=EC=8B=9C=20=EB=A7=88=EC=A7=80=EB=A7=89=20?= =?UTF-8?q?=ED=94=84=EB=A0=88=EC=9E=84=EC=9D=B4=20=ED=91=9C=EC=8B=9C?= =?UTF-8?q?=EB=90=98=EB=AF=80=EB=A1=9C,=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EA=B5=90=EC=B2=B4=EB=A5=BC=202=EB=8B=A8=EA=B3=84=EB=A1=9C=20?= =?UTF-8?q?=EC=B6=95=EC=86=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/LoadingPanel/LoadingPanel.jsx | 166 ++++++------------ 1 file changed, 49 insertions(+), 117 deletions(-) diff --git a/com.twin.app.shoptime/src/views/LoadingPanel/LoadingPanel.jsx b/com.twin.app.shoptime/src/views/LoadingPanel/LoadingPanel.jsx index 17b42608..a1c151fa 100644 --- a/com.twin.app.shoptime/src/views/LoadingPanel/LoadingPanel.jsx +++ b/com.twin.app.shoptime/src/views/LoadingPanel/LoadingPanel.jsx @@ -1,45 +1,28 @@ -import React, { - useCallback, - useEffect, - useMemo, - useRef, - useState, -} from 'react'; +import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"; -import classNames from 'classnames'; -import { - useDispatch, - useSelector, -} from 'react-redux'; +import classNames from "classnames"; +import { useDispatch, useSelector } from "react-redux"; -import { Job } from '@enact/core/util'; -import { Panel } from '@enact/sandstone/Panels'; -import Region from '@enact/sandstone/Region'; -import Spotlight from '@enact/spotlight'; -import Cancelable from '@enact/ui/Cancelable'; +import { Job } from "@enact/core/util"; +import { Panel } from "@enact/sandstone/Panels"; +import Region from "@enact/sandstone/Region"; +import Spotlight from "@enact/spotlight"; +import Cancelable from "@enact/ui/Cancelable"; -import LoadingPreloadImage - from '../../../assets/images/intro/splash_02_stop.webp'; -import LoadingAnimation from '../../../assets/images/intro/splash_03_end.webp'; -import LoadingCompleteImage - from '../../../assets/images/intro/splash_04_end.webp'; -import LoadingShopOnTvImage from '../../../assets/images/intro/splash_end.jpg'; -import { - changeAppStatus, - loadingComplete, -} from '../../actions/commonActions'; -import CustomImage from '../../components/CustomImage/CustomImage'; -import Loader from '../../components/Loader/Loader'; -import PreloadImage from '../../components/PreloadImage/PreloadImage'; -import TPopUp from '../../components/TPopUp/TPopUp'; -import { $L } from '../../utils/helperMethods'; -import css from './LoadingPanel.module.less'; +import LoadingPreloadImage from "../../../assets/images/intro/splash_02_stop.webp"; +import LoadingAnimation from "../../../assets/images/intro/splash_03_end.webp"; +import LoadingCompleteImage from "../../../assets/images/intro/splash_04_end.webp"; +import LoadingShopOnTvImage from "../../../assets/images/intro/splash_end.jpg"; +import { changeAppStatus, loadingComplete } from "../../actions/commonActions"; +import CustomImage from "../../components/CustomImage/CustomImage"; +import Loader from "../../components/Loader/Loader"; +import PreloadImage from "../../components/PreloadImage/PreloadImage"; +import TPopUp from "../../components/TPopUp/TPopUp"; +import { $L } from "../../utils/helperMethods"; +import css from "./LoadingPanel.module.less"; +import useWhyDidYouUpdate from "../../hooks/useWhyDidYouUpdate"; -const loadingImages = [ - LoadingPreloadImage, - LoadingAnimation, - LoadingCompleteImage, -]; +const loadingImages = [LoadingPreloadImage, LoadingAnimation, LoadingCompleteImage]; const MIN_SHOWING_TIME = { launching: 4500, wait: 300, default: 1000 }; const MAX_SHOWING_TIME = 60000; @@ -47,32 +30,29 @@ const MAX_SHOWING_TIME_UNLIMITED = Number.MAX_SAFE_INTEGER; const DUMMY_DELAY = 1000; const HIDING_TIME = 300; -const CancelablePanel = Cancelable( - { modal: true, onCancel: "handleCancel" }, - Panel -); +const CancelablePanel = Cancelable({ modal: true, onCancel: "handleCancel" }, Panel); let minShowingTimeJob, hidingJob, maxShowingTimeJob; export default function LoadingPanel({ showLoadingPanel, ...rest }) { + const { USE_STATE, USE_SELECTOR } = useWhyDidYouUpdate("LoadingPanel", { + showLoadingPanel, + ...rest, + }); const dispatch = useDispatch(); - const [showingStatus, setShowingStatus] = useState({ + const [showingStatus, setShowingStatus] = USE_STATE("showingStatus", { showing: true, hiding: false, }); - const [loadingSign, setLoadingSign] = useState(""); - const [loadingType, setLoadingType] = useState("wait"); - const [loadingImage, setLoadingImage] = useState(""); - const [readyToAni, setReadyToAni] = useState(false); - const [readyToHide, setReadyToHide] = useState(false); + const [loadingType, setLoadingType] = USE_STATE("loadingType", "wait"); + const [readyToAni, setReadyToAni] = USE_STATE("readyToAni", false); + const [readyToHide, setReadyToHide] = USE_STATE("readyToHide", false); - const [loadingStep, setLoadingStep] = useState(0); - const [isVisible, setIsVisible] = useState(false); - const webOSVersion = useSelector( - (state) => state.common.appStatus?.webOSVersion - ); + const [loadingStep, setLoadingStep] = USE_STATE("loadingStep", 0); + const [isVisible, setIsVisible] = USE_STATE("isVisible", false); + const webOSVersion = USE_SELECTOR("webOSVersion", (state) => state.common.appStatus?.webOSVersion); - const httpHeader = useSelector((state) => state.common.httpHeader); + const httpHeader = USE_SELECTOR("httpHeader", (state) => state.common.httpHeader); const deviceCountryCode = httpHeader?.["X-Device-Country"] || ""; const resumeSpotlightTimeoutRef = useRef(null); @@ -126,6 +106,7 @@ export default function LoadingPanel({ showLoadingPanel, ...rest }) { } else { setReadyToHide(false); setReadyToAni(false); + minShowingTimeJob && minShowingTimeJob.stop(); hidingJob && hidingJob.stop(); maxShowingTimeJob && maxShowingTimeJob.stop(); @@ -156,39 +137,13 @@ export default function LoadingPanel({ showLoadingPanel, ...rest }) { useEffect(() => { if (showLoadingPanel.show) { if (!maxShowingTimeJob) { - maxShowingTimeJob = new Job( - () => { - setShowingStatus({ showing: false, hiding: true }); - }, - showLoadingPanel.type === "wait" - ? MAX_SHOWING_TIME_UNLIMITED - : MAX_SHOWING_TIME - ); + maxShowingTimeJob = new Job(() => { + setShowingStatus({ showing: false, hiding: true }); + }); } - - maxShowingTimeJob.start(); + maxShowingTimeJob.startAfter(showLoadingPanel.type === "wait" ? MAX_SHOWING_TIME_UNLIMITED : MAX_SHOWING_TIME); setShowingStatus({ showing: true, hiding: false }); - - let signText = "", - img = ""; - - switch (showLoadingPanel.type) { - case "launching": { - signText = $L("Loading"); - img = LoadingAnimation; - break; - } - - case "wait": { - signText = $L("Please wait"); - img = LoadingAnimation; - break; - } - } - - setLoadingSign(signText); - setLoadingImage(img); setLoadingType(showLoadingPanel.type); } }, [showLoadingPanel]); @@ -232,14 +187,11 @@ export default function LoadingPanel({ showLoadingPanel, ...rest }) { useEffect(() => { let timer; if (isVisible) { - if (loadingStep < 2) { - timer = setTimeout( - () => { - setIsVisible(false); // 다음 이미지를 로드하기 전에 숨김 - setLoadingStep((prevStep) => prevStep + 1); - }, - loadingStep === 0 ? 1000 : loadingStep === 1 ? 1500 : 2000 - ); + if (loadingStep < 1) { + timer = setTimeout(() => { + setIsVisible(false); // 다음 이미지를 로드하기 전에 숨김 + setLoadingStep((prevStep) => prevStep + 1); + }, 1000); } else { return; } @@ -247,11 +199,6 @@ export default function LoadingPanel({ showLoadingPanel, ...rest }) { return () => clearTimeout(timer); }, [isVisible, loadingStep]); - // const getImageSrc = () => { - // if (webOSVersion && Number(webOSVersion) < 5) return LoadingCompleteImage; - // else return loadingImages[loadingStep]; - // }; - const renderImages = useCallback(() => { switch (loadingType) { case "launching": @@ -265,14 +212,9 @@ export default function LoadingPanel({ showLoadingPanel, ...rest }) { alt="Loading Image" /> ) : webOSVersion && Number(webOSVersion) < 5 ? ( // webOs5.0 미만 loading image - Loading Image + Loading Image ) : ( - loadingStep < 3 && ( // normal loading image + loadingStep < 2 && ( // normal loading image - - + + {readyToAni && (