diff options
Diffstat (limited to 'FrontEnd/src')
3 files changed, 37 insertions, 21 deletions
diff --git a/FrontEnd/src/app/views/timeline-common/Timeline.tsx b/FrontEnd/src/app/views/timeline-common/Timeline.tsx index cbe58300..f2c38aeb 100644 --- a/FrontEnd/src/app/views/timeline-common/Timeline.tsx +++ b/FrontEnd/src/app/views/timeline-common/Timeline.tsx @@ -31,17 +31,14 @@ const Timeline: React.FC<TimelineProps> = (props) => { onLoad, } = props; - const [posts, setPosts] = React.useState< - | HttpTimelinePostInfo[] - | "loading" - | "offline" - | "notexist" - | "forbid" - | "error" + const [state, setState] = React.useState< + "loading" | "loaded" | "offline" | "notexist" | "forbid" | "error" >("loading"); + const [posts, setPosts] = React.useState<HttpTimelinePostInfo[]>([]); React.useEffect(() => { - setPosts("loading"); + setState("loading"); + setPosts([]); }, [timelineName]); React.useEffect(() => { @@ -51,18 +48,21 @@ const Timeline: React.FC<TimelineProps> = (props) => { .listPost(timelineName) .then( (data) => { - if (subscribe) setPosts(data); + if (subscribe) { + setState("loaded"); + setPosts(data); + } }, (error) => { if (error instanceof HttpNetworkError) { - setPosts("offline"); + setState("offline"); } else if (error instanceof HttpForbiddenError) { - setPosts("forbid"); + setState("forbid"); } else if (error instanceof HttpNotFoundError) { - setPosts("notexist"); + setState("notexist"); } else { console.error(error); - setPosts("error"); + setState("error"); } } ); @@ -78,7 +78,7 @@ const Timeline: React.FC<TimelineProps> = (props) => { } }, [posts, onLoad]); - switch (posts) { + switch (state) { case "loading": return ( <div> diff --git a/FrontEnd/src/app/views/timeline-common/TimelineLine.tsx b/FrontEnd/src/app/views/timeline-common/TimelineLine.tsx index 593250bd..d020f22c 100644 --- a/FrontEnd/src/app/views/timeline-common/TimelineLine.tsx +++ b/FrontEnd/src/app/views/timeline-common/TimelineLine.tsx @@ -1,5 +1,5 @@ -import clsx from "clsx"; import React from "react"; +import clsx from "clsx"; export interface TimelineLineProps { current?: boolean; @@ -17,7 +17,15 @@ const TimelineLine: React.FC<TimelineLineProps> = ({ style, }) => { return ( - <div className={clsx("timeline-line", className)} style={style}> + <div + className={clsx( + "timeline-line", + current && "current", + center === "loading" && "loading", + className + )} + style={style} + > <div className="segment start" style={{ height: startSegmentLength }} /> {center !== "none" ? ( <div className="node-container"> diff --git a/FrontEnd/src/app/views/timeline-common/timeline-common.sass b/FrontEnd/src/app/views/timeline-common/timeline-common.sass index ce4d053d..5f329d1f 100644 --- a/FrontEnd/src/app/views/timeline-common/timeline-common.sass +++ b/FrontEnd/src/app/views/timeline-common/timeline-common.sass @@ -27,6 +27,10 @@ $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 + to + box-shadow: 0 0 20px 3px color.adjust($timeline-line-color, $lightness: +20%) + @keyframes timeline-line-node-loading-edge from transform: rotate(0turn) @@ -95,11 +99,7 @@ $timeline-line-color-current: #36c2e6 z-index: 2 animation: 1.5s linear infinite timeline-line-node-loading-edge -.current - &.timeline-item - padding-bottom: 2.5em - - .timeline-line + &.current .segment &.start background: linear-gradient($timeline-line-color, $timeline-line-color-current) @@ -108,6 +108,14 @@ $timeline-line-color-current: #36c2e6 .node animation-name: timeline-line-node-current + &.loading + .node + background: $timeline-line-color + animation-name: timeline-line-node-loading + +.timeline-item.current + padding-bottom: 2.5em + .timeline-top position: relative text-align: right |