Use useLoadingState hook in route files

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 />;

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 />;

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 />;

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 />;

frontend/src/routes/homepage.jsx

@@ -10,21 +10,19 @@ import {
 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();
@@ -40,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 />;

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 />;

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 />;

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 />;

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 />;

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 />;