From 7cb9d5d38d7e1811949277c457d53f7ac8d55fed Mon Sep 17 00:00:00 2001
From: keiya sasaki <keiya.s.0210@gmail.com>
Date: Mon, 6 Mar 2023 13:36:59 +0900
Subject: [PATCH] fix: prevent unnecessary render on timeline on reearth/core
 (#510)

fix: prevent unnecessary render on timeline
---
 .../Crust/Widgets/Widget/Timeline/hooks.ts    | 24 +++++++------------
 src/core/Crust/context.ts                     | 12 +++-------
 src/core/engines/Cesium/core/Clock.tsx        |  6 ++---
 3 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/src/core/Crust/Widgets/Widget/Timeline/hooks.ts b/src/core/Crust/Widgets/Widget/Timeline/hooks.ts
index 1f40f8e85f..31269784fd 100644
--- a/src/core/Crust/Widgets/Widget/Timeline/hooks.ts
+++ b/src/core/Crust/Widgets/Widget/Timeline/hooks.ts
@@ -146,11 +146,13 @@ export const useTimeline = ({
     }
   }, [clock, onSpeedChange, onTick]);
 
+  const overriddenStart = overriddenClock?.start?.getTime();
+  const overriddenStop = overriddenClock?.start?.getTime();
   // Sync cesium clock.
   useEffect(() => {
     setRange(prev => {
-      const start = overriddenClock?.start?.getTime() ?? clock?.start?.getTime();
-      const stop = overriddenClock?.stop?.getTime() ?? clock?.stop?.getTime();
+      const start = overriddenStart ?? clockStartTime;
+      const stop = overriddenStop ?? clockStopTime;
       const next = makeRange(start, stop);
       if (prev.start !== next.start || prev.end !== next.end) {
         return next;
@@ -158,15 +160,7 @@ export const useTimeline = ({
       return prev;
     });
     setSpeed(Math.abs(clockSpeed));
-  }, [
-    clockStartTime,
-    clockStopTime,
-    clockSpeed,
-    clock?.start,
-    clock?.stop,
-    overriddenClock?.start,
-    overriddenClock?.stop,
-  ]);
+  }, [clockStartTime, clockStopTime, clockSpeed, overriddenStart, overriddenStop]);
 
   useEffect(() => {
     const h: TickEventCallback = d => {
@@ -179,12 +173,12 @@ export const useTimeline = ({
     };
   }, [onTick, clock?.playing, removeTickEventListener]);
 
+  const overriddenCurrentTime = overriddenClock?.current?.getTime();
   useEffect(() => {
-    const current = overriddenClock?.current;
-    if (current) {
-      setCurrentTime(current.getTime());
+    if (overriddenCurrentTime) {
+      setCurrentTime(overriddenCurrentTime);
     }
-  }, [overriddenClock]);
+  }, [overriddenCurrentTime]);
 
   useEffect(() => {
     if (isMobile) {
diff --git a/src/core/Crust/context.ts b/src/core/Crust/context.ts
index 40329a2263..cb940e055a 100644
--- a/src/core/Crust/context.ts
+++ b/src/core/Crust/context.ts
@@ -45,15 +45,9 @@ export function widgetContextFromMapRef({
       return engine()?.getClock();
     },
     overriddenClock: {
-      get current() {
-        return convertTime(sceneProperty?.timeline?.current);
-      },
-      get start() {
-        return convertTime(sceneProperty?.timeline?.start);
-      },
-      get stop() {
-        return convertTime(sceneProperty?.timeline?.stop);
-      },
+      current: convertTime(sceneProperty?.timeline?.current),
+      start: convertTime(sceneProperty?.timeline?.start),
+      stop: convertTime(sceneProperty?.timeline?.stop),
     },
     initialCamera: sceneProperty?.default?.camera,
     is2d: sceneProperty?.default?.sceneMode === "2d",
diff --git a/src/core/engines/Cesium/core/Clock.tsx b/src/core/engines/Cesium/core/Clock.tsx
index aa8d75a7f9..6f8864d863 100644
--- a/src/core/engines/Cesium/core/Clock.tsx
+++ b/src/core/engines/Cesium/core/Clock.tsx
@@ -14,9 +14,9 @@ export type Props = {
 export default function ReearthClock({ property, onTick }: Props): JSX.Element | null {
   const { animation, visible, start, stop, current, stepType, rangeType, multiplier, step } =
     property?.timeline ?? {};
-  const dateStart = convertTime(start);
-  const dateStop = convertTime(stop);
-  const dateCurrent = convertTime(current);
+  const dateStart = useMemo(() => convertTime(start), [start]);
+  const dateStop = useMemo(() => convertTime(stop), [stop]);
+  const dateCurrent = useMemo(() => convertTime(current), [current]);
   const startTime = useMemo(
     () => (dateStart ? JulianDate.fromDate(dateStart) : undefined),
     [dateStart],