...

3 files changed, 27 insertions, 14 deletions

diff --git a/FrontEnd/src/app/views/timeline-common/Timeline.tsx b/FrontEnd/src/app/views/timeline-common/Timeline.tsx
index f2c38aeb..f7f7dcfc 100644
--- a/FrontEnd/src/app/views/timeline-common/Timeline.tsx
+++ b/FrontEnd/src/app/views/timeline-common/Timeline.tsx
@@ -73,22 +73,22 @@ const Timeline: React.FC<TimelineProps> = (props) => {
   }, [timelineName, reloadKey]);
 
   React.useEffect(() => {
-    if (Array.isArray(posts)) {
+    if (state === "loaded") {
       onLoad?.();
     }
-  }, [posts, onLoad]);
+  }, [state, onLoad]);
 
   switch (state) {
     case "loading":
       return (
-        <div>
-          <TimelineTop
-            lineProps={{
-              center: "loading",
-              startSegmentLength: 56,
-            }}
-          />
-        </div>
+        <TimelineTop
+          className="timeline-top-loading-enter"
+          height={100}
+          lineProps={{
+            center: "loading",
+            startSegmentLength: 56,
+          }}
+        />
       );
     case "offline":
       return (
diff --git a/FrontEnd/src/app/views/timeline-common/TimelineTop.tsx b/FrontEnd/src/app/views/timeline-common/TimelineTop.tsx
index 6ee4e3e6..6382d2c5 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelineTop.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelineTop.tsx
@@ -1,21 +1,25 @@
 import React from "react";
+import clsx from "clsx";
 
 import TimelineLine, { TimelineLineProps } from "./TimelineLine";
 
 export interface TimelineTopProps {
   height?: number | string;
   lineProps?: TimelineLineProps;
-  children?: React.ReactElement;
+  className?: string;
+  style?: React.CSSProperties;
 }
 
 const TimelineTop: React.FC<TimelineTopProps> = (props) => {
-  const { height, children } = props;
+  const { height, style, className } = props;
   const lineProps = props.lineProps ?? { center: "none" };
 
   return (
-    <div style={{ height: height }} className="timeline-top">
+    <div
+      style={{ ...style, height: height }}
+      className={clsx("timeline-top", className)}
+    >
       <TimelineLine {...lineProps} />
-      {children}
     </div>
   );
 };
diff --git a/FrontEnd/src/app/views/timeline-common/timeline-common.sass b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
index 5f329d1f..e634e77e 100644
--- a/FrontEnd/src/app/views/timeline-common/timeline-common.sass
+++ b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
@@ -37,6 +37,15 @@ $timeline-line-color-current: #36c2e6
   to
     transform: rotate(1turn)
 
+@keyframes timeline-top-loading-enter
+  from
+    transform: translate(0, -100%)
+
+  to
+
+.timeline-top-loading-enter
+  animation: 1s timeline-top-loading-enter
+
 .timeline-line
   display: flex
   flex-direction: column