Merge pull request #2822 from metabrainz/react-query

Integrating React Query to improve performance

frontend/js/src/about/current-status/CurrentStatus.tsx

@@ -1,5 +1,7 @@
+import { useQuery } from "@tanstack/react-query";
 import React from "react";
-import { useLoaderData } from "react-router-dom";
+import { useLocation } from "react-router-dom";
+import { RouteQuery } from "../../utils/Loader";
 
 type CurrentStatusLoaderData = {
   listenCount: number;
@@ -13,13 +15,11 @@ type CurrentStatusLoaderData = {
 };
 
 export default function CurrentStatus() {
-  const {
-    userCount,
-    listenCount,
-    listenCountsPerDay,
-    load,
-  } = useLoaderData() as CurrentStatusLoaderData;
-
+  const location = useLocation();
+  const { data } = useQuery<CurrentStatusLoaderData>(
+    RouteQuery(["current-status"], location.pathname)
+  );
+  const { userCount, listenCount, listenCountsPerDay, load } = data || {};
   return (
     <>
       <h2 className="page-title">Current status</h2>
@@ -48,12 +48,13 @@ export default function CurrentStatus() {
                 </tr>
               )}
               {listenCountsPerDay &&
-                listenCountsPerDay.map((data, index) => (
-                  <tr key={`listen-count-${data.date}`}>
+                listenCountsPerDay.map((listenCountData, index) => (
+                  <tr key={`listen-count-${listenCountData.date}`}>
                     <td>
-                      Number of listens submitted {data.label} ({data.date})
+                      Number of listens submitted {listenCountData.label} (
+                      {listenCountData.date})
                     </td>
-                    <td>{data.listenCount}</td>
+                    <td>{listenCountData.listenCount}</td>
                   </tr>
                 ))}
             </tbody>

frontend/js/src/about/routes/index.tsx

@@ -1,5 +1,5 @@
 import type { RouteObject } from "react-router-dom";
-import RouteLoader from "../../utils/Loader";
+import { RouteQueryLoader } from "../../utils/Loader";
 
 const getAboutRoutes = (): RouteObject[] => {
   const routes = [
@@ -26,7 +26,7 @@ const getAboutRoutes = (): RouteObject[] => {
         },
         {
           path: "current-status/",
-          loader: RouteLoader,
+          loader: RouteQueryLoader("current-status"),
           lazy: async () => {
             const CurrentStatus = await import(
               "../current-status/CurrentStatus"

frontend/js/src/album/AlbumPage.tsx

@@ -10,14 +10,14 @@ import {
 import { chain, flatten, isEmpty, isUndefined, merge } from "lodash";
 import tinycolor from "tinycolor2";
 import { Helmet } from "react-helmet";
-import { Link, useLoaderData } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { Link, useLocation, useParams } from "react-router-dom";
 import {
   getRelIconLink,
   ListeningStats,
   popularRecordingToListen,
 } from "./utils";
 import GlobalAppContext from "../utils/GlobalAppContext";
-import Loader from "../components/Loader";
 import {
   generateAlbumArtThumbnailLink,
   getAlbumArtFromReleaseGroupMBID,
@@ -28,6 +28,7 @@ import BrainzPlayer from "../common/brainzplayer/BrainzPlayer";
 import TagsComponent from "../tags/TagsComponent";
 import ListenCard from "../common/listens/ListenCard";
 import OpenInMusicBrainzButton from "../components/OpenInMusicBrainz";
+import { RouteQuery } from "../utils/Loader";
 
 // not the same format of tracks as what we get in the ArtistPage props
 type AlbumRecording = {
@@ -58,7 +59,12 @@ export type AlbumPageProps = {
 };
 
 export default function AlbumPage(): JSX.Element {
-  const { currentUser, APIService } = React.useContext(GlobalAppContext);
+  const { APIService } = React.useContext(GlobalAppContext);
+  const location = useLocation();
+  const params = useParams() as { albumMBID: string };
+  const { data } = useQuery<AlbumPageProps>(
+    RouteQuery(["album", params], location.pathname)
+  );
   const {
     release_group_metadata: initialReleaseGroupMetadata,
     recordings_release_mbid,
@@ -68,12 +74,13 @@ export default function AlbumPage(): JSX.Element {
     caa_release_mbid,
     type,
     listening_stats,
-  } = useLoaderData() as AlbumPageProps;
+  } = data || {};
+
   const {
     total_listen_count: listenCount,
     listeners: topListeners,
     total_user_count: userCount,
-  } = listening_stats;
+  } = listening_stats || {};
 
   const [metadata, setMetadata] = React.useState(initialReleaseGroupMetadata);
   const [reviews, setReviews] = React.useState<CritiqueBrainzReviewAPI[]>([]);
@@ -86,8 +93,6 @@ export default function AlbumPage(): JSX.Element {
   } = metadata as ReleaseGroupMetadataLookup;
   const releaseGroupTags = tag?.release_group;
 
-  const [loading, setLoading] = React.useState(false);
-
   /** Album art and album color related */
   const [coverArtSrc, setCoverArtSrc] = React.useState(
     caa_id && caa_release_mbid
@@ -122,6 +127,9 @@ export default function AlbumPage(): JSX.Element {
 
   React.useEffect(() => {
     async function fetchCoverArt() {
+      if (!release_group_mbid) {
+        return;
+      }
       try {
         const fetchedCoverArtSrc = await getAlbumArtFromReleaseGroupMBID(
           release_group_mbid,
@@ -202,7 +210,6 @@ export default function AlbumPage(): JSX.Element {
       <Helmet>
         <title>{album?.name}</title>
       </Helmet>
-      <Loader isLoading={loading} />
       <div className="entity-page-header flex">
         <div className="cover-art">
           <img
@@ -415,7 +422,7 @@ export default function AlbumPage(): JSX.Element {
             <div className="top-listeners">
               <h3 className="header-with-line">Top listeners</h3>
               {topListeners
-                .slice(0, 10)
+                ?.slice(0, 10)
                 .map(
                   (listener: { listen_count: number; user_name: string }) => {
                     return (