目標の追加ロードのローダーを修正

MurakawaTakuya · Jan 25, 2025 · e439e17 · e439e17
1 parent a0e3061
commit e439e17
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 41 deletions.
diff --git a/src/Components/DashBoard/DashBoard.tsx b/src/Components/DashBoard/DashBoard.tsx
@@ -7,7 +7,6 @@ import {
 } from "@/utils/API/Result/fetchResult";
 import { useResults } from "@/utils/ResultContext";
 import { useUser } from "@/utils/UserContext";
-import CircularProgress from "@mui/joy/CircularProgress";
 import Typography from "@mui/joy/Typography";
 import LinearProgress from "@mui/material/LinearProgress";
 import { useEffect, useRef, useState } from "react";
@@ -42,12 +41,11 @@ export default function DashBoard({
     noMorePending,
     noMoreFinished,
   } = useResults();
-  const [noResult, setNoResult] = useState<boolean>(false);
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [reachedBottom, setReachedBottom] = useState<boolean>(false);
-  const [isLoadingMore, setIsLoadingMore] = useState<boolean>(false);
+  const [noResult, setNoResult] = useState<boolean>(false); // 目標が一つもない場合
+  const [isLoading, setIsLoading] = useState<boolean>(true); // Dashboardの初期ロード
+  const [reachedBottom, setReachedBottom] = useState<boolean>(false); // 画面下に到達して読み込み
   const bottomRef = useRef<HTMLDivElement>(null);
-  const isAlreadyFetching = useRef(false);
+  const isAlreadyFetching = useRef(false); // 重複してfetchを防ぐ
 
   const { user } = useUser();
   const myUserId = user?.userId;
@@ -61,10 +59,6 @@ export default function DashBoard({
     } else {
       isAlreadyFetching.current = true;
     }
-    // 画面下に到達して既にロード中の場合はreturn
-    if (reachedBottom && !isLoadingMore) {
-      setIsLoadingMore(true);
-    }
     // 全て読み込んだ場合
     if (
       (pending && noMorePending.current) ||
@@ -127,7 +121,6 @@ export default function DashBoard({
         setIsLoading(false);
         setReachedBottom(false);
         isAlreadyFetching.current = false;
-        setIsLoadingMore(false);
       })
       .catch((error) => {
         console.error("Error fetching results:", error);
@@ -176,6 +169,7 @@ export default function DashBoard({
     bottomRef,
   ]);
 
+  // 目標があるか確認
   useEffect(() => {
     if (
       (pending && pendingResults.length === 0) ||
@@ -195,6 +189,7 @@ export default function DashBoard({
     );
   }, [success, failed, pending, successResults, failedResults, pendingResults]);
 
+  // 投稿のモザイク処理
   useEffect(() => {
     if (user?.loginType === "Guest") {
       return;
@@ -262,32 +257,16 @@ export default function DashBoard({
 
           {/* 下に到達した時に続きを表示 */}
           {((pending && !noMorePending.current) ||
-            (success && failed && !noMoreFinished.current)) &&
-            (reachedBottom ? (
-              <div
-                style={{
-                  display: "flex",
-                  justifyContent: "center",
-                  marginTop: "20px",
-                }}
-              >
-                <CircularProgress
-                  color="primary"
-                  variant="soft"
-                  size="lg"
-                  value={30}
-                />
-              </div>
-            ) : (
-              <Typography
-                level="body-md"
-                color="primary"
-                textAlign="center"
-                sx={{ fontWeight: 700 }}
-              >
-                スクロールしてもっと表示
-              </Typography>
-            ))}
+            (success && failed && !noMoreFinished.current)) && (
+            <Typography
+              level="body-md"
+              color={reachedBottom ? "success" : "primary"}
+              textAlign="center"
+              fontWeight={700}
+            >
+              {reachedBottom ? "Loading..." : "Display More"}
+            </Typography>
+          )}
         </div>
       )}
     </>

diff --git a/src/Components/Progress/SuccessStep.tsx b/src/Components/Progress/SuccessStep.tsx
@@ -156,7 +156,7 @@ export const SuccessStep = ({
                   textAlign: "center",
                 }}
               >
-                <CenterIn delay={0.5}>
+                <CenterIn>
                   <Typography
                     level="body-lg"
                     sx={{

diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx
@@ -118,6 +118,8 @@ export default function Account() {
                 {!PWAReady && !isPWA && (
                   <Typography color="danger" textAlign="center">
                     PWAを準備中です。しばらくしてからページを更新してください。
+                    <br />
+                    ブラウザの「ホーム画面に追加」からすぐにインストールすることもできます。
                   </Typography>
                 )}
                 {user?.loginType === "Guest" && (

diff --git a/src/utils/Auth/signInWithGoogleAccount.ts b/src/utils/Auth/signInWithGoogleAccount.ts
@@ -12,7 +12,8 @@ export const signInWithGoogleAccount = async () => {
     await signInWithPopup(auth, googleProvider);
 
     showSnackBar({
-      message: "Googleアカウントでログインしました",
+      message:
+        "Googleアカウントでログインしました。ユーザーデータを取得しています。",
       type: "success",
     });
   } catch (error) {

diff --git a/src/utils/Auth/signInWithMail.ts b/src/utils/Auth/signInWithMail.ts
@@ -13,7 +13,8 @@ export const signInWithMail = async (email: string, password: string) => {
   await signInWithEmailAndPassword(auth, email, password)
     .then(() => {
       showSnackBar({
-        message: "メールでログインしました",
+        message:
+          "メールアドレスでログインしました。ユーザーデータを取得しています。",
         type: "success",
       });
     })
@@ -22,7 +23,7 @@ export const signInWithMail = async (email: string, password: string) => {
       console.error("errorMessage:", (error as Error)?.message);
 
       const errorMessage = (error as Error)?.message;
-      let snackBarMessage = "メールでのログインに失敗しました";
+      let snackBarMessage = "メールアドレスでのログインに失敗しました";
 
       if (errorMessage.includes("auth/wrong-password")) {
         snackBarMessage = "パスワードが間違っています";