feat: Add skeleton for text post.

3 files changed, 35 insertions, 2 deletions

diff --git a/FrontEnd/src/app/views/common/Skeleton.tsx b/FrontEnd/src/app/views/common/Skeleton.tsx
new file mode 100644
index 00000000..6340f96f
--- /dev/null
+++ b/FrontEnd/src/app/views/common/Skeleton.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import clsx from "clsx";
+import { range } from "lodash";
+
+export interface SkeletonProps {
+  lineNumber?: number;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const Skeleton: React.FC<SkeletonProps> = (props) => {
+  const { lineNumber: lineNumberProps, className, style } = props;
+  const lineNumber = lineNumberProps ?? 3;
+
+  return (
+    <div className={clsx(className, "cru-skeleton")} style={style}>
+      {range(lineNumber).map((i) => (
+        <div key={i} className="cru-skeleton-line" />
+      ))}
+    </div>
+  );
+};
+
+export default Skeleton;
diff --git a/FrontEnd/src/app/views/common/common.sass b/FrontEnd/src/app/views/common/common.sass
index 78e6fd14..0a03d5e9 100644
--- a/FrontEnd/src/app/views/common/common.sass
+++ b/FrontEnd/src/app/views/common/common.sass
@@ -31,3 +31,11 @@
   border-radius: 50%

   background: white

   touch-action: none

+

+.cru-skeleton

+  padding: 0 2em

+

+.cru-skeleton-line

+  height: 1em

+  background-color: #e6e6e6

+  margin: 0.8em 0
\ No newline at end of file
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostContentView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostContentView.tsx
index 67871c48..35d091af 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePostContentView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePostContentView.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { Spinner } from "react-bootstrap";
 import clsx from "clsx";
 
 import { HttpNetworkError } from "@/http/common";
@@ -7,6 +6,8 @@ import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
 
 import { useUser } from "@/services/user";
 
+import Skeleton from "../common/Skeleton";
+
 const TextView: React.FC<TimelinePostContentViewProps> = (props) => {
   const { post, className, style } = props;
 
@@ -49,7 +50,7 @@ const TextView: React.FC<TimelinePostContentViewProps> = (props) => {
       </div>
     );
   } else if (text == null) {
-    return <Spinner variant="primary" animation="grow" />;
+    return <Skeleton />;
   } else {
     return (
       <div className={className} style={style}>