feat: prepare for publish

Signed-off-by: Ruihang Xia <[email protected]>
waynexia · Aug 10, 2024 · 4930a96 · 4930a96
1 parent 0027f53
commit 4930a96
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 17 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -22,14 +22,14 @@ function App() {
   // prepare (mock) data
   useEffect(() => {
     const fetchData = async () => {
-      // if (!isUpdateStarted.current) {
-      //   isUpdateStarted.current = true
-      //   const data = await build_list(1, currentYear, setList)
-      //   setIsFinished(true)
-      // }
-      const data = await mock_list(100, 1000)
-      setList(data)
-      setIsFinished(true)
+      if (!isUpdateStarted.current) {
+        isUpdateStarted.current = true
+        const data = await build_list(1, currentYear, setList)
+        setIsFinished(true)
+      }
+      // const data = await mock_list(100, 1000)
+      // setList(data)
+      // setIsFinished(true)
     }
 
     fetchData()

diff --git a/src/index.css b/src/index.css
@@ -129,8 +129,8 @@ td {
 }
 
 .loading-spin {
-    width: 48px;
-    height: 48px;
+    width: 80px;
+    height: 80px;
     display: inline-block;
     position: relative;
     border: 2px solid gray;
@@ -149,18 +149,18 @@ td {
     bottom: 0;
     margin: auto;
     border: 2px solid gainsboro;
-    width: 38px;
-    height: 38px;
+    width: 60px;
+    height: 60px;
     animation: rotationBack 1.5s linear infinite;
     transform-origin: center center;
 }
 
 .loading-spin::before {
-    width: 28px;
-    height: 28px;
+    width: 40px;
+    height: 40px;
     border-color: black;
     box-sizing: border-box;
-    animation: rotation 1s linear infinite;
+    animation: rotation 1.2s linear infinite;
 }
 
 @keyframes rotation {

diff --git a/src/loading.tsx b/src/loading.tsx
@@ -2,8 +2,12 @@ function Loading() {
   return (
     <div className="flex h-100vh w-100vw justify-center align-items-center">
       <span className="loading-spin"></span>
-      <div className="w-4" />
-      <h1>Loading...</h1>
+      <div className="w-10" />
+      <div>
+        <h1 className="m-t-0">Loading...</h1>
+        <p className="m-1">It may take a while to load data from wikipedia.org</p>
+        <p className="m-1">Tips: scroll the timeline on the left side</p>
+      </div>
     </div>
   )
 }