From fdc2d4a971d608bb230cd8aa1e602197c7775231 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 30 Jun 2021 22:46:42 +0800
Subject: ...

---
 FrontEnd/src/views/center/TimelineBoard.tsx | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

(limited to 'FrontEnd/src/views/center')

diff --git a/FrontEnd/src/views/center/TimelineBoard.tsx b/FrontEnd/src/views/center/TimelineBoard.tsx
index d7aa39ab..3961a7bc 100644
--- a/FrontEnd/src/views/center/TimelineBoard.tsx
+++ b/FrontEnd/src/views/center/TimelineBoard.tsx
@@ -208,7 +208,8 @@ const TimelineBoardItemContainer: React.FC<TimelineBoardItemContainerProps> = ({
 
 interface TimelineBoardUIProps {
   title?: string;
-  timelines: HttpTimelineInfo[] | "offline" | "loading";
+  state: "offline" | "loading" | "loaded";
+  timelines: HttpTimelineInfo[];
   onReload: () => void;
   className?: string;
   editHandler?: {
@@ -218,7 +219,7 @@ interface TimelineBoardUIProps {
 }
 
 const TimelineBoardUI: React.FC<TimelineBoardUIProps> = (props) => {
-  const { title, timelines, className, editHandler } = props;
+  const { title, state, timelines, className, editHandler } = props;
 
   const editable = editHandler != null;
 
@@ -246,13 +247,13 @@ const TimelineBoardUI: React.FC<TimelineBoardUIProps> = (props) => {
           ))}
       </div>
       {(() => {
-        if (timelines === "loading") {
+        if (state === "loading") {
           return (
             <div className="d-flex flex-grow-1 justify-content-center align-items-center">
               <Spinner />
             </div>
           );
-        } else if (timelines === "offline") {
+        } else if (state === "offline") {
           return (
             <div className="d-flex flex-grow-1 justify-content-center align-items-center">
               <LoadFailReload onReload={props.onReload} />
@@ -301,36 +302,39 @@ const TimelineBoard: React.FC<TimelineBoardProps> = ({
   load,
   editHandler,
 }) => {
-  const [timelines, setTimelines] = React.useState<
-    HttpTimelineInfo[] | "offline" | "loading"
-  >("loading");
+  const [state, setState] = React.useState<"offline" | "loading" | "loaded">(
+    "loading"
+  );
+  const [timelines, setTimelines] = React.useState<HttpTimelineInfo[]>([]);
 
   React.useEffect(() => {
     let subscribe = true;
-    if (timelines === "loading") {
+    if (state === "loading") {
       void load().then(
         (timelines) => {
           if (subscribe) {
+            setState("loaded");
             setTimelines(timelines);
           }
         },
         () => {
-          setTimelines("offline");
+          setState("offline");
         }
       );
     }
     return () => {
       subscribe = false;
     };
-  }, [load, timelines]);
+  }, [load, state]);
 
   return (
     <TimelineBoardUI
       title={title}
       className={className}
+      state={state}
       timelines={timelines}
       onReload={() => {
-        setTimelines("loading");
+        setState("loaded");
       }}
       editHandler={
         typeof timelines === "object" && editHandler != null
-- 
cgit v1.2.3