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,12 +15,12 @@ type CurrentStatusLoaderData = {
 };
 
 export default function CurrentStatus() {
+  const location = useLocation();
   const {
-    userCount,
-    listenCount,
-    listenCountsPerDay,
-    load,
-  } = useLoaderData() as CurrentStatusLoaderData;
+    data: { userCount, listenCount, listenCountsPerDay, load },
+  } = useQuery(RouteQuery(["current-status"], location.pathname)) as {
+    data: CurrentStatusLoaderData;
+  };
 
   return (
     <>

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,17 +59,23 @@ 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 {
-    release_group_metadata: initialReleaseGroupMetadata,
-    recordings_release_mbid,
-    release_group_mbid,
-    mediums,
-    caa_id,
-    caa_release_mbid,
-    type,
-    listening_stats,
-  } = useLoaderData() as AlbumPageProps;
+    data: {
+      release_group_metadata: initialReleaseGroupMetadata,
+      recordings_release_mbid,
+      release_group_mbid,
+      mediums,
+      caa_id,
+      caa_release_mbid,
+      type,
+      listening_stats,
+    },
+  } = useQuery(RouteQuery(["album", params], location.pathname)) as {
+    data: AlbumPageProps;
+  };
   const {
     total_listen_count: listenCount,
     listeners: topListeners,
@@ -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
@@ -202,7 +207,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

frontend/js/src/artist/ArtistPage.tsx

@@ -9,10 +9,10 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { chain, isEmpty, isUndefined, partition, sortBy } from "lodash";
 import { sanitize } from "dompurify";
-import { Link, useLoaderData, useParams } from "react-router-dom";
+import { Link, useLoaderData, useLocation, useParams } from "react-router-dom";
 import { Helmet } from "react-helmet";
+import { useQuery } from "@tanstack/react-query";
 import GlobalAppContext from "../utils/GlobalAppContext";
-import Loader from "../components/Loader";
 import { getReviewEventContent } from "../utils/utils";
 import BrainzPlayer from "../common/brainzplayer/BrainzPlayer";
 import TagsComponent from "../tags/TagsComponent";
@@ -29,6 +29,7 @@ import type {
   SimilarArtist,
 } from "../album/utils";
 import ReleaseCard from "../explore/fresh-releases/components/ReleaseCard";
+import { RouteQuery } from "../utils/Loader";
 
 export type ArtistPageProps = {
   popularRecordings: PopularRecording[];
@@ -40,22 +41,29 @@ export type ArtistPageProps = {
 };
 
 export default function ArtistPage(): JSX.Element {
+  const _ = useLoaderData();
   const { APIService } = React.useContext(GlobalAppContext);
+  const location = useLocation();
+  const params = useParams() as { artistMBID: string };
+  const { artistMBID } = params;
   const {
-    artist,
-    popularRecordings,
-    releaseGroups,
-    similarArtists,
-    listeningStats,
-    coverArt: coverArtSVG,
-  } = useLoaderData() as ArtistPageProps;
+    data: {
+      artist,
+      popularRecordings,
+      releaseGroups,
+      similarArtists,
+      listeningStats,
+      coverArt: coverArtSVG,
+    },
+  } = useQuery(RouteQuery(["artist", params], location.pathname)) as {
+    data: ArtistPageProps;
+  };
   const {
     total_listen_count: listenCount,
     listeners: topListeners,
     total_user_count: userCount,
   } = listeningStats;
 
-  const { artistMBID } = useParams();
   const [reviews, setReviews] = React.useState<CritiqueBrainzReviewAPI[]>([]);
   const [wikipediaExtract, setWikipediaExtract] = React.useState<
     WikipediaExtract

frontend/js/src/explore/music-neighborhood/MusicNeighborhood.tsx

@@ -4,8 +4,9 @@ import { toast } from "react-toastify";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCopy, faDownload } from "@fortawesome/free-solid-svg-icons";
 import { isEmpty, isEqual, kebabCase } from "lodash";
-import { useLoaderData } from "react-router-dom";
+import { useLoaderData, useLocation } from "react-router-dom";
 import { Helmet } from "react-helmet";
+import { useQuery } from "@tanstack/react-query";
 import { ToastMsg } from "../../notifications/Notifications";
 import GlobalAppContext from "../../utils/GlobalAppContext";
 import SearchBox from "./components/SearchBox";
@@ -14,6 +15,7 @@ import Panel from "./components/Panel";
 import BrainzPlayer from "../../common/brainzplayer/BrainzPlayer";
 import generateTransformedArtists from "./utils/generateTransformedArtists";
 import { downloadComponentAsImage, copyImageToClipboard } from "./utils/utils";
+import { RouteQuery } from "../../utils/Loader";
 
 type MusicNeighborhoodLoaderData = {
   algorithm: string;
@@ -37,10 +39,12 @@ const isColorTooDark = (color: tinycolor.Instance): boolean => {
 };
 
 export default function MusicNeighborhood() {
+  const location = useLocation();
   const {
-    algorithm: DEFAULT_ALGORITHM,
-    artist_mbid: DEFAULT_ARTIST_MBID,
-  } = useLoaderData() as MusicNeighborhoodLoaderData;
+    data: { algorithm: DEFAULT_ALGORITHM, artist_mbid: DEFAULT_ARTIST_MBID },
+  } = useQuery(RouteQuery(["music-neighborhood"], location.pathname)) as {
+    data: MusicNeighborhoodLoaderData;
+  };
 
   const BASE_URL = `https://labs.api.listenbrainz.org/similar-artists/json?algorithm=${DEFAULT_ALGORITHM}&artist_mbid=`;
   const DEFAULT_COLORS = colorGenerator();
@@ -290,7 +294,6 @@ export default function MusicNeighborhood() {
 
   React.useEffect(() => {
     onArtistChange(DEFAULT_ARTIST_MBID);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const browserHasClipboardAPI = "clipboard" in navigator;

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Outlet } from "react-router-dom";
 import type { RouteObject } from "react-router-dom";
-import RouteLoader from "../../utils/Loader";
+import RouteLoader, { RouteQueryLoader } from "../../utils/Loader";
 
 const getExploreRoutes = (): RouteObject[] => {
   const routes = [
@@ -92,7 +92,7 @@ const getExploreRoutes = (): RouteObject[] => {
             const SimilarUsers = await import("../similar-users/SimilarUsers");
             return { Component: SimilarUsers.default };
           },
-          loader: RouteLoader,
+          loader: RouteQueryLoader("similar-users"),
         },
         {
           path: "music-neighborhood/",
@@ -102,7 +102,7 @@ const getExploreRoutes = (): RouteObject[] => {
             );
             return { Component: MusicNeighborhood.default };
           },
-          loader: RouteLoader,
+          loader: RouteQueryLoader("music-neighborhood"),
         },
         {
           path: "ai-brainz/",

frontend/js/src/explore/similar-users/SimilarUsers.tsx

@@ -1,9 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
 import * as React from "react";
 import { Helmet } from "react-helmet";
-import { Link, useLoaderData } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
+import { RouteQuery } from "../../utils/Loader";
 
 export default function SimilarUsers() {
-  const { similarUsers } = useLoaderData() as { similarUsers: string[][] };
+  const location = useLocation();
+  const {
+    data: { similarUsers },
+  } = useQuery(RouteQuery(["similar-users"], location.pathname)) as {
+    data: { similarUsers: string[][] };
+  };
+
   return (
     <div id="similar-users">
       <Helmet>

frontend/js/src/home/Homepage.tsx

@@ -22,24 +22,26 @@ import * as React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSortDown, faSortUp } from "@fortawesome/free-solid-svg-icons";
 import { isNumber, throttle } from "lodash";
-import {
-  Link,
-  Navigate,
-  useLoaderData,
-  useSearchParams,
-} from "react-router-dom";
+import { Link, Navigate, useLocation, useSearchParams } from "react-router-dom";
 import { Helmet } from "react-helmet";
+import { useQuery } from "@tanstack/react-query";
 import NumberCounter from "./NumberCounter";
 import Blob from "./Blob";
 import GlobalAppContext from "../utils/GlobalAppContext";
+import { RouteQuery } from "../utils/Loader";
 
 type HomePageProps = {
   listenCount: number;
   artistCount: number;
 };
 
 function HomePage() {
-  const { listenCount, artistCount } = useLoaderData() as HomePageProps;
+  const location = useLocation();
+  const {
+    data: { listenCount, artistCount },
+  } = useQuery(RouteQuery(["home"], location.pathname)) as {
+    data: HomePageProps;
+  };
   const homepageUpperRef = React.useRef<HTMLDivElement>(null);
   const homepageLowerRef = React.useRef<HTMLDivElement>(null);
 

frontend/js/src/index.tsx

@@ -11,6 +11,8 @@ import ErrorBoundary from "./utils/ErrorBoundary";
 import GlobalAppContext from "./utils/GlobalAppContext";
 import { getPageProps } from "./utils/utils";
 import getRoutes from "./routes/routes";
+import queryClient from "./utils/QueryClient";
+import ReactQueryDevtool from "./utils/ReactQueryDevTools";
 
 document.addEventListener("DOMContentLoaded", async () => {
   const { domContainer, globalAppContext, sentryProps } = await getPageProps();
@@ -48,7 +50,9 @@ document.addEventListener("DOMContentLoaded", async () => {
             defaultTitle="ListenBrainz"
             titleTemplate="%s - ListenBrainz"
           />
-          <RouterProvider router={router} />
+          <ReactQueryDevtool client={queryClient}>
+            <RouterProvider router={router} />
+          </ReactQueryDevtool>
         </NiceModal.Provider>
       </GlobalAppContext.Provider>
     </ErrorBoundary>

frontend/js/src/player/PlayerPage.tsx

@@ -7,7 +7,14 @@ import { toast } from "react-toastify";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { sanitize } from "dompurify";
-import { Link, Navigate, useLoaderData, useParams } from "react-router-dom";
+import {
+  Link,
+  Navigate,
+  useLocation,
+  useParams,
+  useSearchParams,
+} from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
 import GlobalAppContext from "../utils/GlobalAppContext";
 import BrainzPlayer from "../common/brainzplayer/BrainzPlayer";
 
@@ -20,6 +27,8 @@ import {
 import ListenControl from "../common/listens/ListenControl";
 import ListenCard from "../common/listens/ListenCard";
 import { ToastMsg } from "../notifications/Notifications";
+import { RouteQuery } from "../utils/Loader";
+import { getObjectForURLSearchParams } from "../utils/utils";
 
 export type PlayerPageProps = {
   playlist: JSPFObject;
@@ -252,8 +261,15 @@ export default class PlayerPage extends React.Component<
 }
 
 export function PlayerPageWrapper() {
-  const loaderData = useLoaderData() as PlayerPageLoaderData;
-  return <PlayerPage playlist={loaderData.playlist} />;
+  const [searchParams, setSearchParams] = useSearchParams();
+  const searchParamsObject = getObjectForURLSearchParams(searchParams);
+  const location = useLocation();
+  const { data } = useQuery(
+    RouteQuery(["player", searchParamsObject], location.pathname)
+  ) as {
+    data: PlayerPageLoaderData;
+  };
+  return <PlayerPage playlist={data.playlist} />;
 }
 
 export function PlayerPageRedirectToAlbum() {

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Outlet } from "react-router-dom";
-import RouteLoader from "../../utils/Loader";
+import { RouteQueryLoader } from "../../utils/Loader";
 
 const getPlayerRoutes = () => {
   const routes = [
@@ -14,7 +14,7 @@ const getPlayerRoutes = () => {
             const PlayerPage = await import("../PlayerPage");
             return { Component: PlayerPage.PlayerPageWrapper };
           },
-          loader: RouteLoader,
+          loader: RouteQueryLoader("player", true),
         },
         {
           path: "release/:releaseMBID",