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

@@ -73,7 +73,7 @@ export default function AlbumPage(): JSX.Element {
       type,
       listening_stats,
     },
-  } = useQuery(RouteQuery(["album", params.albumMBID], location.pathname)) as {
+  } = useQuery(RouteQuery(["album", params], location.pathname)) as {
     data: AlbumPageProps;
   };
   const {

frontend/js/src/artist/ArtistPage.tsx

@@ -9,7 +9,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { chain, isEmpty, isUndefined, partition, sortBy } from "lodash";
 import { sanitize } from "dompurify";
-import { Link, useLocation, 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";
@@ -41,9 +41,11 @@ export type ArtistPageProps = {
 };
 
 export default function ArtistPage(): JSX.Element {
+  const _ = useLoaderData();
   const { APIService } = React.useContext(GlobalAppContext);
   const location = useLocation();
-  const { artistMBID } = useParams() as { artistMBID: string };
+  const params = useParams() as { artistMBID: string };
+  const { artistMBID } = params;
   const {
     data: {
       artist,
@@ -53,7 +55,7 @@ export default function ArtistPage(): JSX.Element {
       listeningStats,
       coverArt: coverArtSVG,
     },
-  } = useQuery(RouteQuery(["artist", artistMBID], location.pathname)) as {
+  } = useQuery(RouteQuery(["artist", params], location.pathname)) as {
     data: ArtistPageProps;
   };
   const {

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/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",

frontend/js/src/recommended/tracks/Recommendations.tsx

@@ -4,23 +4,26 @@ import * as React from "react";
 
 import { get, isInteger } from "lodash";
 import { toast } from "react-toastify";
-import { useLoaderData } from "react-router-dom";
+import { useLocation, useParams, useSearchParams } from "react-router-dom";
 
 import { Helmet } from "react-helmet";
+import { useQuery } from "@tanstack/react-query";
 import APIServiceClass from "../../utils/APIService";
 import GlobalAppContext from "../../utils/GlobalAppContext";
 import BrainzPlayer from "../../common/brainzplayer/BrainzPlayer";
 import Loader from "../../components/Loader";
 import {
   fullLocalizedDateFromTimestampOrISODate,
   getArtistName,
+  getObjectForURLSearchParams,
   getRecordingMBID,
   getTrackName,
   preciseTimestamp,
 } from "../../utils/utils";
 import ListenCard from "../../common/listens/ListenCard";
 import RecommendationFeedbackComponent from "../../common/listens/RecommendationFeedbackComponent";
 import { ToastMsg } from "../../notifications/Notifications";
+import { RouteQuery } from "../../utils/Loader";
 
 export type RecommendationsProps = {
   recommendations?: Array<Recommendation>;
@@ -370,6 +373,17 @@ export default class Recommendations extends React.Component<
 }
 
 export function RecommendationsPageWrapper() {
-  const loaderData = useLoaderData() as RecommendationsLoaderData;
-  return <Recommendations {...loaderData} />;
+  const location = useLocation();
+  const params = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const searchParamsObject = getObjectForURLSearchParams(searchParams);
+  const { data } = useQuery(
+    RouteQuery(
+      ["recommendation", params, searchParamsObject],
+      location.pathname
+    )
+  ) as {
+    data: RecommendationsLoaderData;
+  };
+  return <Recommendations {...data} />;
 }

frontend/js/src/recommended/tracks/routes/index.tsx

@@ -1,5 +1,5 @@
 import type { RouteObject } from "react-router-dom";
-import RouteLoader from "../../../utils/Loader";
+import RouteLoader, { RouteQueryLoader } from "../../../utils/Loader";
 
 const getRecommendationsRoutes = (): RouteObject[] => {
   const routes = [
@@ -26,7 +26,7 @@ const getRecommendationsRoutes = (): RouteObject[] => {
               Component: RecommendationsPage.RecommendationsPageWrapper,
             };
           },
-          loader: RouteLoader,
+          loader: RouteQueryLoader("recommendation", true),
         },
       ],
     },

frontend/js/src/release/Release.tsx

@@ -9,10 +9,10 @@ type ReleaseLoaderData = {
 
 export default function Release() {
   const location = useLocation();
-  const { releaseMBID } = useParams() as { releaseMBID: string };
+  const params = useParams() as { releaseMBID: string };
   const {
     data: { releaseGroupMBID },
-  } = useQuery(RouteQuery(["release", releaseMBID], location.pathname)) as {
+  } = useQuery(RouteQuery(["release", params], location.pathname)) as {
     data: ReleaseLoaderData;
   };
   return <Navigate to={`/album/${releaseGroupMBID}/`} />;

frontend/js/src/routes/EntityPages.tsx

@@ -16,15 +16,15 @@ const getEntityPages = (): RouteObject[] => {
             const ArtistPage = await import("../artist/ArtistPage");
             return { Component: ArtistPage.default };
           },
-          loader: RouteQueryLoader(["artist"]),
+          loader: RouteQueryLoader("artist"),
         },
         {
           path: "album/:albumMBID/",
           lazy: async () => {
             const AlbumPage = await import("../album/AlbumPage");
             return { Component: AlbumPage.default };
           },
-          loader: RouteQueryLoader(["album"]),
+          loader: RouteQueryLoader("album"),
         },
         {
           path: "release-group/:releaseGroupMBID/",
@@ -39,7 +39,7 @@ const getEntityPages = (): RouteObject[] => {
             const Release = await import("../release/Release");
             return { Component: Release.default };
           },
-          loader: RouteQueryLoader(["release"]),
+          loader: RouteQueryLoader("release"),
         },
       ],
     },

frontend/js/src/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 getIndexRoutes = (): RouteObject[] => {
   const routes = [
@@ -15,7 +15,7 @@ const getIndexRoutes = (): RouteObject[] => {
             const HomePage = await import("../home/Homepage");
             return { Component: HomePage.HomePageWrapper };
           },
-          loader: RouteLoader,
+          loader: RouteQueryLoader("home"),
         },
         {
           path: "login/",
@@ -76,7 +76,7 @@ const getIndexRoutes = (): RouteObject[] => {
             const SearchResults = await import("../search/UserSearch");
             return { Component: SearchResults.default };
           },
-          loader: RouteLoader,
+          loader: RouteQueryLoader("search-users", true),
         },
         {
           path: "playlist/:playlistID/",