Use useLoadingState hook in route files

Valkyriezz · Valkyriezz · commit afea594ae4c2 · 2026-04-02T01:15:42.000+05:30
diff --git a/frontend/src/routes/accolade.jsx b/frontend/src/routes/accolade.jsx
@@ -2,17 +2,16 @@ import { mdiArrowLeft, mdiArrowRight, mdiLink, mdiViewGridPlus } from "@mdi/js";
 import Icon from "@mdi/react";
 import { useEffect, useMemo, useState } from "react";
 import { Badge, Button, Card, ListGroup } from "react-bootstrap";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { Link, useParams, useSearchParams } from "react-router";
 
 import VertItem from "../components/vertitem.jsx";
 import { useRetrieveAccoladeQuery, useRetrieveAvermentQuery } from "../features/call.js";
-import { hideLoad, showLoad } from "../features/part.js";
+import { useLoadingState } from "../features/hooks.js";
 import { formatTime, generateIdentity, portraitProvider, rarities, relativeImageUrl } from "../features/util.js";
 import Mistaken from "./mistaken.jsx";
 
 export default function Accolade() {
-  const dispatch = useDispatch();
   const { slugdata: accolade } = useParams();
   const vibe = useSelector((data) => data.area.vibe);
 
@@ -101,14 +100,7 @@ export default function Accolade() {
     }
   }, [pageCall, awardees, pagePoll, setPageCall]);
 
-  // Show or Hide LoadNote
-  useEffect(() => {
-    if (progress) {
-      dispatch(showLoad());
-    } else {
-      dispatch(hideLoad());
-    }
-  }, [progress, dispatch]);
+  useLoadingState(progress);
 
   if (haveError) {
     return <Mistaken />;
diff --git a/frontend/src/routes/accolist.jsx b/frontend/src/routes/accolist.jsx
@@ -1,30 +1,21 @@
 import { mdiHistory } from "@mdi/js";
 import Icon from "@mdi/react";
-import { useEffect } from "react";
 import { Button, Card } from "react-bootstrap";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { Link } from "react-router";
 
 import AccoItem from "../components/accoitem.jsx";
 import Grouping from "../components/grouping.jsx";
 import { useRetrieveAccoListQuery } from "../features/call.js";
-import { hideLoad, showLoad } from "../features/part.js";
+import { useLoadingState } from "../features/hooks.js";
 import { formatTime, generateIdentity } from "../features/util.js";
 import Mistaken from "./mistaken.jsx";
 
 export default function AccoList() {
-  const dispatch = useDispatch();
   const { data: list, isLoading, error } = useRetrieveAccoListQuery();
   const vibe = useSelector((data) => data.area.vibe);
 
-  // Show or Hide LoadNote
-  useEffect(() => {
-    if (isLoading) {
-      dispatch(showLoad());
-    } else {
-      dispatch(hideLoad());
-    }
-  }, [isLoading, dispatch]);
+  useLoadingState(isLoading);
 
   if (error) {
     return <Mistaken />;
diff --git a/frontend/src/routes/category.jsx b/frontend/src/routes/category.jsx
@@ -1,31 +1,22 @@
 import { mdiViewGridPlus } from "@mdi/js";
 import Icon from "@mdi/react";
-import { useEffect } from "react";
 import { Button, Card } from "react-bootstrap";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { Link, useParams } from "react-router";
 
 import AccoItem from "../components/accoitem.jsx";
 import Grouping from "../components/grouping.jsx";
 import { useRetrieveCategoryQuery } from "../features/call.js";
-import { hideLoad, showLoad } from "../features/part.js";
+import { useLoadingState } from "../features/hooks.js";
 import { formatTime, generateIdentity } from "../features/util.js";
 import Mistaken from "./mistaken.jsx";
 
 export default function Category() {
-  const dispatch = useDispatch();
   const { slugdata: category } = useParams();
   const { data: list, isLoading, error } = useRetrieveCategoryQuery(category);
   const vibe = useSelector((data) => data.area.vibe);
 
-  // Show or Hide LoadNote
-  useEffect(() => {
-    if (isLoading) {
-      dispatch(showLoad());
-    } else {
-      dispatch(hideLoad());
-    }
-  }, [isLoading, dispatch]);
+  useLoadingState(isLoading);
 
   if (error) {
     return <Mistaken />;
diff --git a/frontend/src/routes/findpage.jsx b/frontend/src/routes/findpage.jsx
@@ -1,28 +1,19 @@
-import { useEffect } from "react";
 import { Badge, Card, ListGroup } from "react-bootstrap";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { useParams } from "react-router";
 
 import VertItem from "../components/vertitem.jsx";
 import { useRetrieveDiscoverQuery } from "../features/call.js";
-import { hideLoad, showLoad } from "../features/part.js";
+import { useLoadingState } from "../features/hooks.js";
 import { formatTime, generateIdentity, portraitProvider } from "../features/util.js";
 import Mistaken from "./mistaken.jsx";
 
 export default function FindPage() {
-  const dispatch = useDispatch();
   const { slugdata: findtext } = useParams();
   const { data: dict, isLoading, error } = useRetrieveDiscoverQuery(findtext, { skip: false });
   const vibe = useSelector((data) => data.area.vibe);
 
-  // Show or Hide LoadNote
-  useEffect(() => {
-    if (isLoading) {
-      dispatch(showLoad());
-    } else {
-      dispatch(hideLoad());
-    }
-  }, [isLoading, dispatch]);
+  useLoadingState(isLoading);
 
   if (findtext.length < 4) {
     return <Mistaken />;
diff --git a/frontend/src/routes/homepage.jsx b/frontend/src/routes/homepage.jsx
@@ -1,22 +1,28 @@
-import { mdiCrosshairsGps, mdiHeart, mdiHistory, mdiStarFourPoints, mdiTrophy, mdiViewGridPlus } from "@mdi/js";
+import {
+  mdiCrosshairsGps,
+  mdiHeart,
+  mdiHistory,
+  mdiInformationOutline,
+  mdiStarFourPoints,
+  mdiTrophy,
+  mdiViewGridPlus,
+} from "@mdi/js";
 import Icon from "@mdi/react";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
-import { useEffect } from "react";
 import { Button, Card, ListGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { Link, useNavigate } from "react-router";
 
 import VertItem from "../components/vertitem.jsx";
 import { useRetrieveAccoListQuery, useRetrieveGrantingQuery } from "../features/call.js";
-import { hideLoad, showLoad } from "../features/part.js";
+import { useLoadingState } from "../features/hooks.js";
 import { generateIdentity, portraitProvider } from "../features/util.js";
 import Mistaken from "./mistaken.jsx";
 
 dayjs.extend(relativeTime);
 
 export default function Homepage() {
-  const dispatch = useDispatch();
   const navigate = useNavigate();
   const { data: granting, isLoading: isGrantingLoading, error: grantingError } = useRetrieveGrantingQuery();
   const { data: accolade, isLoading: isAccoladeLoading, error: accoladeError } = useRetrieveAccoListQuery();
@@ -32,14 +38,7 @@ export default function Homepage() {
     }
   };
 
-  // Show or Hide LoadNote
-  useEffect(() => {
-    if (isLoading) {
-      dispatch(showLoad());
-    } else {
-      dispatch(hideLoad());
-    }
-  }, [isLoading, dispatch]);
+  useLoadingState(isLoading);
 
   if (error) {
     return <Mistaken />;
@@ -128,6 +127,17 @@ export default function Homepage() {
             <Icon path={mdiCrosshairsGps} size={0.875} className="me-1" />
             Explore badges
           </Button>
+          <Button
+            as={Link}
+            to="/addendum"
+            variant="outline-secondary"
+            className="d-grid d-inline-flex align-items-center ps-1 vibe-border"
+            size="sm"
+            style={{ "--vibe": vibe }}
+          >
+            <Icon path={mdiInformationOutline} size={0.875} className="me-1" />
+            Service information
+          </Button>
           <Button
             as="a"
             href="https://chat.fedoraproject.org/#/room/#badges:fedoraproject.org"
@@ -175,7 +185,7 @@ export default function Homepage() {
                       )}
                     </>
                   }
-                  shot={item.person?.email ? portraitProvider(item.person.email, 45) : null}
+                  shot={item.person?.mail ? portraitProvider(item.person.mail, 45) : null}
                   link={`/identity/${item.person?.nickname || ""}`}
                 />
               ))}
diff --git a/frontend/src/routes/identity.jsx b/frontend/src/routes/identity.jsx
@@ -1,19 +1,17 @@
 import { mdiHistory, mdiSend } from "@mdi/js";
 import Icon from "@mdi/react";
-import { useEffect } from "react";
 import { Button, Card } from "react-bootstrap";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { Link, useParams } from "react-router";
 
 import AccoItem from "../components/accoitem.jsx";
 import Grouping from "../components/grouping.jsx";
 import { useRetrieveIdentityQuery } from "../features/call.js";
-import { hideLoad, showLoad } from "../features/part.js";
+import { useLoadingState } from "../features/hooks.js";
 import { formatTime, generateIdentity, portraitProvider } from "../features/util.js";
 import Mistaken from "./mistaken.jsx";
 
 export default function Identity() {
-  const dispatch = useDispatch();
   const { slugdata: identity } = useParams();
   const vibe = useSelector((data) => data.area.vibe);
   const authUser = useSelector((data) => data.auth.user);
@@ -26,14 +24,7 @@ export default function Identity() {
     skip: !identity,
   });
 
-  // Show or Hide LoadNote
-  useEffect(() => {
-    if (isLoading) {
-      dispatch(showLoad());
-    } else {
-      dispatch(hideLoad());
-    }
-  }, [isLoading, dispatch]);
+  useLoadingState(isLoading);
 
   if (error) {
     return <Mistaken />;
diff --git a/frontend/src/routes/rankings.jsx b/frontend/src/routes/rankings.jsx
@@ -1,13 +1,13 @@
 import { mdiCalendarCheck, mdiCalendarHeart, mdiCalendarMonth, mdiCalendarRange, mdiCalendarWeek } from "@mdi/js";
 import Icon from "@mdi/react";
-import { useEffect } from "react";
 import { Badge, Button, Card, Form, ListGroup } from "react-bootstrap";
 import { useDispatch, useSelector } from "react-redux";
 import { Link, useLocation, useNavigate, useParams } from "react-router";
 
 import VertItem from "../components/vertitem.jsx";
 import { useRetrieveRankingsQuery } from "../features/call.js";
-import { hideLoad, keepDate, showLoad } from "../features/part.js";
+import { useLoadingState } from "../features/hooks.js";
+import { keepDate } from "../features/part.js";
 import { generateIdentity, portraitProvider } from "../features/util.js";
 import Mistaken from "./mistaken.jsx";
 
@@ -50,14 +50,7 @@ export default function Rankings() {
 
   const { data: dict, isLoading, error } = useRetrieveRankingsQuery(params, { skip: false });
 
-  // Show or Hide LoadNote
-  useEffect(() => {
-    if (isLoading) {
-      dispatch(showLoad());
-    } else {
-      dispatch(hideLoad());
-    }
-  }, [isLoading, dispatch]);
+  useLoadingState(isLoading);
 
   if (error) {
     return <Mistaken />;
diff --git a/frontend/src/routes/rarities.jsx b/frontend/src/routes/rarities.jsx
@@ -1,29 +1,20 @@
-import { useEffect } from "react";
 import { Button, Card, Image, ListGroup } from "react-bootstrap";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { Link, useParams } from "react-router";
 
 import AccoItem from "../components/accoitem.jsx";
 import Grouping from "../components/grouping.jsx";
 import { useRetrieveRaritiesQuery } from "../features/call.js";
-import { hideLoad, showLoad } from "../features/part.js";
+import { useLoadingState } from "../features/hooks.js";
 import { formatTime, generateIdentity, obtainRarityText, rareColors, rarities } from "../features/util.js";
 import Mistaken from "./mistaken.jsx";
 
 export default function Rarities() {
-  const dispatch = useDispatch();
   const { slugdata: rareunit } = useParams();
   const { data: list, isLoading, error } = useRetrieveRaritiesQuery(rareunit);
   const vibe = useSelector((data) => data.area.vibe);
 
-  // Show or Hide LoadNote
-  useEffect(() => {
-    if (isLoading) {
-      dispatch(showLoad());
-    } else {
-      dispatch(hideLoad());
-    }
-  }, [isLoading, dispatch]);
+  useLoadingState(isLoading);
 
   if (error) {
     return <Mistaken />;
diff --git a/frontend/src/routes/recently.jsx b/frontend/src/routes/recently.jsx
@@ -1,30 +1,21 @@
 import { mdiViewGridPlus } from "@mdi/js";
 import Icon from "@mdi/react";
-import { useEffect } from "react";
 import { Button, Card } from "react-bootstrap";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { Link } from "react-router";
 
 import AccoItem from "../components/accoitem.jsx";
 import Grouping from "../components/grouping.jsx";
 import { useRetrieveAccoListQuery } from "../features/call.js";
-import { hideLoad, showLoad } from "../features/part.js";
+import { useLoadingState } from "../features/hooks.js";
 import { formatTime, generateIdentity } from "../features/util.js";
 import Mistaken from "./mistaken.jsx";
 
 export default function Recently() {
-  const dispatch = useDispatch();
   const { data: list, isLoading, error } = useRetrieveAccoListQuery();
   const vibe = useSelector((data) => data.area.vibe);
 
-  // Show or Hide LoadNote
-  useEffect(() => {
-    if (isLoading) {
-      dispatch(showLoad());
-    } else {
-      dispatch(hideLoad());
-    }
-  }, [isLoading, dispatch]);
+  useLoadingState(isLoading);
 
   if (error) {
     return <Mistaken />;
diff --git a/frontend/src/routes/userpast.jsx b/frontend/src/routes/userpast.jsx
@@ -1,18 +1,16 @@
 import { mdiBookAccount, mdiSend } from "@mdi/js";
 import Icon from "@mdi/react";
-import { useEffect } from "react";
 import { Badge, Button, Card, ListGroup } from "react-bootstrap";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { Link, useParams } from "react-router";
 
 import VertItem from "../components/vertitem.jsx";
 import { useRetrieveIdentityQuery } from "../features/call.js";
-import { hideLoad, showLoad } from "../features/part.js";
+import { useLoadingState } from "../features/hooks.js";
 import { formatTime, generateIdentity, portraitProvider } from "../features/util.js";
 import Mistaken from "./mistaken.jsx";
 
 export default function UserPast() {
-  const dispatch = useDispatch();
   const { slugdata: identity } = useParams();
   const vibe = useSelector((data) => data.area.vibe);
   const authUser = useSelector((data) => data.auth.user);
@@ -25,14 +23,7 @@ export default function UserPast() {
     skip: !identity,
   });
 
-  // Show or Hide LoadNote
-  useEffect(() => {
-    if (isLoading) {
-      dispatch(showLoad());
-    } else {
-      dispatch(hideLoad());
-    }
-  }, [isLoading, dispatch]);
+  useLoadingState(isLoading);
 
   if (error) {
     return <Mistaken />;
