chore: update memo requests

web/src/pages/Explore.tsx

@@ -24,6 +24,7 @@ const Explore = () => {
 
   useEffect(() => {
     nextPageTokenRef.current = undefined;
+    memoList.reset();
     fetchMemos();
   }, [tagQuery, textQuery]);
 
@@ -58,8 +59,9 @@ const Explore = () => {
           <MemoView key={`${memo.id}-${memo.displayTime}`} memo={memo} showCreator />
         ))}
         {isRequesting ? (
-          <div className="flex flex-col justify-start items-center w-full my-4">
-            <p className="text-sm text-gray-400 italic">{t("memo.fetching-data")}</p>
+          <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>
         ) : !nextPageTokenRef.current ? (
           sortedMemos.length === 0 && (

web/src/pages/Home.tsx

@@ -34,6 +34,7 @@ const Home = () => {
 
   useEffect(() => {
     nextPageTokenRef.current = undefined;
+    memoList.reset();
     fetchMemos();
   }, [tagQuery, textQuery]);
 
@@ -75,8 +76,9 @@ const Home = () => {
               <MemoView key={`${memo.id}-${memo.displayTime}`} memo={memo} showVisibility showPinned />
             ))}
             {isRequesting ? (
-              <div className="flex flex-col justify-start items-center w-full my-4">
-                <p className="text-sm text-gray-400 italic">{t("memo.fetching-data")}</p>
+              <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>
             ) : !nextPageTokenRef.current ? (
               sortedMemos.length === 0 && (

web/src/pages/Timeline.tsx

@@ -60,6 +60,7 @@ const Timeline = () => {
 
   useEffect(() => {
     nextPageTokenRef.current = undefined;
+    memoList.reset();
     fetchMemos();
   }, [selectedDay, tagQuery, textQuery]);
 
@@ -180,8 +181,9 @@ const Timeline = () => {
               </Fragment>
             ))}
             {isRequesting ? (
-              <div className="flex flex-col justify-start items-center w-full my-4">
-                <p className="text-sm text-gray-400 italic">{t("memo.fetching-data")}</p>
+              <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>
             ) : !nextPageTokenRef.current ? (
               sortedMemos.length === 0 && (

web/src/pages/UserProfile.tsx

@@ -55,6 +55,7 @@ const UserProfile = () => {
     }
 
     nextPageTokenRef.current = undefined;
+    memoList.reset();
     fetchMemos();
   }, [user, tagQuery, textQuery]);
 
@@ -109,8 +110,9 @@ const UserProfile = () => {
                 <MemoView key={`${memo.id}-${memo.displayTime}`} memo={memo} showVisibility showPinned />
               ))}
               {isRequesting ? (
-                <div className="flex flex-col justify-start items-center w-full my-4">
-                  <p className="text-sm text-gray-400 italic">{t("memo.fetching-data")}</p>
+                <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>
               ) : !nextPageTokenRef.current ? (
                 sortedMemos.length === 0 && (