From 6b71f05f5fc4b8df6e16fc33f482ccfcc3d9bb0b Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sun, 4 Apr 2021 15:59:23 +0800
Subject: ...

---
 FrontEnd/src/app/views/timeline-common/Timeline.tsx     | 10 ++++++++--
 .../src/app/views/timeline-common/TimelineDateLabel.tsx |  2 +-
 FrontEnd/src/app/views/timeline-common/TimelineLine.tsx | 16 +++++++++++++---
 FrontEnd/src/app/views/timeline-common/TimelineTop.tsx  | 10 +++++++---
 .../src/app/views/timeline-common/timeline-common.sass  | 17 +++++++++++++++++
 5 files changed, 46 insertions(+), 9 deletions(-)

(limited to 'FrontEnd/src')

diff --git a/FrontEnd/src/app/views/timeline-common/Timeline.tsx b/FrontEnd/src/app/views/timeline-common/Timeline.tsx
index 9b67b90b..cbe58300 100644
--- a/FrontEnd/src/app/views/timeline-common/Timeline.tsx
+++ b/FrontEnd/src/app/views/timeline-common/Timeline.tsx
@@ -8,6 +8,7 @@ import {
 import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
 
 import TimelinePagedPostListView from "./TimelinePagedPostListView";
+import TimelineTop from "./TimelineTop";
 
 export interface TimelineProps {
   className?: string;
@@ -80,8 +81,13 @@ const Timeline: React.FC<TimelineProps> = (props) => {
   switch (posts) {
     case "loading":
       return (
-        <div className={className} style={style}>
-          Loading.
+        <div>
+          <TimelineTop
+            lineProps={{
+              center: "loading",
+              startSegmentLength: 56,
+            }}
+          />
         </div>
       );
     case "offline":
diff --git a/FrontEnd/src/app/views/timeline-common/TimelineDateLabel.tsx b/FrontEnd/src/app/views/timeline-common/TimelineDateLabel.tsx
index ae1b7386..80968ee2 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelineDateLabel.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelineDateLabel.tsx
@@ -8,7 +8,7 @@ export interface TimelineDateItemProps {
 const TimelineDateLabel: React.FC<TimelineDateItemProps> = ({ date }) => {
   return (
     <div className="timeline-date-item">
-      <TimelineLine center={null} />
+      <TimelineLine center="none" />
       <div className="timeline-date-item-badge">
         {date.toLocaleDateString()}
       </div>
diff --git a/FrontEnd/src/app/views/timeline-common/TimelineLine.tsx b/FrontEnd/src/app/views/timeline-common/TimelineLine.tsx
index fd7dde0a..593250bd 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelineLine.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelineLine.tsx
@@ -4,7 +4,7 @@ import React from "react";
 export interface TimelineLineProps {
   current?: boolean;
   startSegmentLength?: string | number;
-  center: "node" | null;
+  center: "node" | "loading" | "none";
   className?: string;
   style?: React.CSSProperties;
 }
@@ -19,12 +19,22 @@ const TimelineLine: React.FC<TimelineLineProps> = ({
   return (
     <div className={clsx("timeline-line", className)} style={style}>
       <div className="segment start" style={{ height: startSegmentLength }} />
-      {center == "node" ? (
+      {center !== "none" ? (
         <div className="node-container">
           <div className="node"></div>
+          {center === "loading" ? (
+            <svg className="node-loading-edge" viewBox="0 0 100 100">
+              <path
+                d="M 50,10 A 40 40 45 0 1 78.28,21.72"
+                stroke="currentcolor"
+                strokeLinecap="square"
+                strokeWidth="8"
+              />
+            </svg>
+          ) : null}
         </div>
       ) : null}
-      <div className="segment end"></div>
+      {center !== "loading" ? <div className="segment end"></div> : null}
       {current && <div className="segment current-end" />}
     </div>
   );
diff --git a/FrontEnd/src/app/views/timeline-common/TimelineTop.tsx b/FrontEnd/src/app/views/timeline-common/TimelineTop.tsx
index 39cfa426..6ee4e3e6 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelineTop.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelineTop.tsx
@@ -1,16 +1,20 @@
 import React from "react";
 
-import TimelineLine from "./TimelineLine";
+import TimelineLine, { TimelineLineProps } from "./TimelineLine";
 
 export interface TimelineTopProps {
   height?: number | string;
+  lineProps?: TimelineLineProps;
   children?: React.ReactElement;
 }
 
-const TimelineTop: React.FC<TimelineTopProps> = ({ height, children }) => {
+const TimelineTop: React.FC<TimelineTopProps> = (props) => {
+  const { height, children } = props;
+  const lineProps = props.lineProps ?? { center: "none" };
+
   return (
     <div style={{ height: height }} className="timeline-top">
-      <TimelineLine center={null} />
+      <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 6d5e63b1..ce4d053d 100644
--- a/FrontEnd/src/app/views/timeline-common/timeline-common.sass
+++ b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
@@ -27,6 +27,12 @@ $timeline-line-color-current: #36c2e6
     background: color.adjust($timeline-line-color-current, $lightness: +10%)
     box-shadow: 0 0 20px 3px color.adjust($timeline-line-color-current, $lightness: +10%, $alpha: -0.1)
 
+@keyframes timeline-line-node-loading-edge
+  from
+    transform: rotate(0turn)
+  to
+    transform: rotate(1turn)
+
 .timeline-line
   display: flex
   flex-direction: column
@@ -78,6 +84,17 @@ $timeline-line-color-current: #36c2e6
     animation: 1s infinite alternate
     animation-name: timeline-line-node-noncurrent
 
+  .node-loading-edge
+    color: $timeline-line-color
+    width: $timeline-line-node-radius + 20
+    height: $timeline-line-node-radius + 20
+    position: absolute
+    left: -10px
+    top: -10px
+    box-sizing: border-box
+    z-index: 2
+    animation: 1.5s linear infinite timeline-line-node-loading-edge
+
 .current
   &.timeline-item
     padding-bottom: 2.5em
-- 
cgit v1.2.3