From 9a27fdf85524f3b7f108eb64b6e34c9feff56a36 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Mon, 12 Aug 2024 23:52:23 +0800
Subject: [PATCH] chore: tweak load more button

---
 web/src/locales/en.json       |  5 +----
 web/src/pages/Archived.tsx    | 30 +++++++++++++++---------------
 web/src/pages/Explore.tsx     | 30 +++++++++++++++---------------
 web/src/pages/Home.tsx        | 30 +++++++++++++++---------------
 web/src/pages/UserProfile.tsx | 26 +++++++++++---------------
 5 files changed, 57 insertions(+), 64 deletions(-)

diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index fac5b42fc..1853c239f 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -102,10 +102,7 @@
     "copy-link": "Copy Link",
     "count-memos-in-date": "{{count}} memos in {{date}}",
     "delete-confirm": "Are you sure you want to delete this memo? THIS ACTION IS IRREVERSIBLE",
-    "delete-memo": "Delete Memo",
-    "embed": "Embed",
-    "fetch-more": "Click to fetch more",
-    "fetching-data": "Fetching data…",
+    "load-more": "Load more",
     "no-archived-memos": "No archived memos.",
     "search-placeholder": "Search memos",
     "show-more": "Show more",
diff --git a/web/src/pages/Archived.tsx b/web/src/pages/Archived.tsx
index 18369d60c..02d630815 100644
--- a/web/src/pages/Archived.tsx
+++ b/web/src/pages/Archived.tsx
@@ -132,25 +132,25 @@ const Archived = () => {
               <MemoContent key={`${memo.name}-${memo.displayTime}`} memoName={memo.name} nodes={memo.nodes} readonly={true} />
             </div>
           ))}
-          {isRequesting ? (
-            <div className="flex flex-row justify-center items-center w-full my-4 text-gray-400">
-              <Icon.Loader className="w-4 h-auto animate-spin mr-1" />
-              <p className="text-sm italic">{t("memo.fetching-data")}</p>
-            </div>
-          ) : !nextPageToken ? (
-            sortedMemos.length === 0 && (
-              <div className="w-full mt-16 mb-8 flex flex-col justify-center items-center italic">
-                <Empty />
-                <p className="mt-4 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
-              </div>
-            )
-          ) : (
+          {nextPageToken && (
             <div className="w-full flex flex-row justify-center items-center my-4">
-              <Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={() => fetchMemos(nextPageToken)}>
-                {t("memo.fetch-more")}
+              <Button
+                variant="plain"
+                color="neutral"
+                loading={isRequesting}
+                endDecorator={<Icon.ArrowDown className="w-4 h-auto" />}
+                onClick={() => fetchMemos(nextPageToken)}
+              >
+                {t("memo.load-more")}
               </Button>
             </div>
           )}
+          {!nextPageToken && sortedMemos.length === 0 && (
+            <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
+              <Empty />
+              <p className="mt-2 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
+            </div>
+          )}
         </div>
       </div>
     </section>
diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx
index 9fced6506..d19a1f88f 100644
--- a/web/src/pages/Explore.tsx
+++ b/web/src/pages/Explore.tsx
@@ -78,25 +78,25 @@ const Explore = () => {
             {sortedMemos.map((memo) => (
               <MemoView key={`${memo.name}-${memo.updateTime}`} memo={memo} showCreator showVisibility showPinned compact />
             ))}
-            {isRequesting ? (
-              <div className="flex flex-row justify-center items-center w-full my-4 text-gray-400">
-                <Icon.Loader className="w-4 h-auto animate-spin mr-1" />
-                <p className="text-sm italic">{t("memo.fetching-data")}</p>
-              </div>
-            ) : !nextPageToken ? (
-              sortedMemos.length === 0 && (
-                <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
-                  <Empty />
-                  <p className="mt-2 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
-                </div>
-              )
-            ) : (
+            {nextPageToken && (
               <div className="w-full flex flex-row justify-center items-center my-4">
-                <Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={() => fetchMemos(nextPageToken)}>
-                  {t("memo.fetch-more")}
+                <Button
+                  variant="plain"
+                  color="neutral"
+                  loading={isRequesting}
+                  endDecorator={<Icon.ArrowDown className="w-4 h-auto" />}
+                  onClick={() => fetchMemos(nextPageToken)}
+                >
+                  {t("memo.load-more")}
                 </Button>
               </div>
             )}
+            {!nextPageToken && sortedMemos.length === 0 && (
+              <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
+                <Empty />
+                <p className="mt-2 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
+              </div>
+            )}
           </div>
         </div>
         {md && (
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 22add5e82..811ac3dfc 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -94,25 +94,25 @@ const Home = () => {
             {sortedMemos.map((memo) => (
               <MemoView key={`${memo.name}-${memo.updateTime}`} memo={memo} showVisibility showPinned compact />
             ))}
-            {isRequesting ? (
-              <div className="flex flex-row justify-center items-center w-full my-4 text-gray-400">
-                <Icon.Loader className="w-4 h-auto animate-spin mr-1" />
-                <p className="text-sm italic">{t("memo.fetching-data")}</p>
-              </div>
-            ) : !nextPageToken ? (
-              sortedMemos.length === 0 && (
-                <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
-                  <Empty />
-                  <p className="mt-2 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
-                </div>
-              )
-            ) : (
+            {nextPageToken && (
               <div className="w-full flex flex-row justify-center items-center my-4">
-                <Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={() => fetchMemos(nextPageToken)}>
-                  {t("memo.fetch-more")}
+                <Button
+                  variant="plain"
+                  color="neutral"
+                  loading={isRequesting}
+                  endDecorator={<Icon.ArrowDown className="w-4 h-auto" />}
+                  onClick={() => fetchMemos(nextPageToken)}
+                >
+                  {t("memo.load-more")}
                 </Button>
               </div>
             )}
+            {!nextPageToken && sortedMemos.length === 0 && (
+              <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
+                <Empty />
+                <p className="mt-2 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
+              </div>
+            )}
           </div>
         </div>
         {md && (
diff --git a/web/src/pages/UserProfile.tsx b/web/src/pages/UserProfile.tsx
index 7b698fd39..3afb0f89e 100644
--- a/web/src/pages/UserProfile.tsx
+++ b/web/src/pages/UserProfile.tsx
@@ -134,29 +134,25 @@ const UserProfile = () => {
               {sortedMemos.map((memo) => (
                 <MemoView key={`${memo.name}-${memo.displayTime}`} memo={memo} showVisibility showPinned compact />
               ))}
-              {isRequesting ? (
-                <div className="flex flex-row justify-center items-center w-full my-4 text-gray-400">
-                  <Icon.Loader className="w-4 h-auto animate-spin mr-1" />
-                  <p className="text-sm italic">{t("memo.fetching-data")}</p>
-                </div>
-              ) : !nextPageToken ? (
-                sortedMemos.length === 0 && (
-                  <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
-                    <Empty />
-                    <p className="mt-2 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
-                  </div>
-                )
-              ) : (
+              {nextPageToken && (
                 <div className="w-full flex flex-row justify-center items-center my-4">
                   <Button
                     variant="plain"
-                    endDecorator={<Icon.ArrowDown className="w-5 h-auto" />}
+                    color="neutral"
+                    loading={isRequesting}
+                    endDecorator={<Icon.ArrowDown className="w-4 h-auto" />}
                     onClick={() => fetchMemos(nextPageToken)}
                   >
-                    {t("memo.fetch-more")}
+                    {t("memo.load-more")}
                   </Button>
                 </div>
               )}
+              {!nextPageToken && sortedMemos.length === 0 && (
+                <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
+                  <Empty />
+                  <p className="mt-2 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
+                </div>
+              )}
             </>
           ) : (
             <p>Not found</p>