Make the top artist relations it's own page

app/routes/_index.tsx

@@ -149,15 +149,15 @@ export default function Index() {
                   Top Artists
                 </ButtonLink>
                 <ButtonLink
-                  to="/spotify/top-artists?related=1"
+                  to="/spotify/top-artists-relations"
                   disabled={loading}
                   className={clsx(
                     'breadcrumbs',
                     ['btn-xs', 'py-0'],
                     ['sm:btn-sm'],
                   )}
                 >
-                  Top Artist Relations
+                  Top Artists Relations
                 </ButtonLink>
                 <ButtonLink
                   to="/spotify/for-you"

app/routes/spotify.top-artists-relations.tsx

@@ -0,0 +1,93 @@
+import { LoaderArgs, json } from '@remix-run/node'
+import { useLoaderData } from '@remix-run/react'
+import retry from 'async-retry'
+
+import { spotifyStrategy } from '~/lib/auth.server'
+import { AppMetaFunction, mergeMeta } from '~/lib/remix'
+import { forwardServerTimingHeaders } from '~/lib/responses.server'
+import spotifyLib, { topArtistSearch } from '~/lib/spotify.server'
+import userSettings from '~/lib/userSettings.server'
+import wikipedia from '~/lib/wikipedia.server'
+
+import Album from '~/components/Album'
+import AlbumErrorBoundary from '~/components/Album/ErrorBoundary'
+import { Layout, Link } from '~/components/Base'
+import type { SearchBreadcrumbsProps } from '~/components/SearchBreadcrumbs'
+import config from '~/config'
+
+export async function loader({ request, context }: LoaderArgs) {
+  const { serverTiming } = context
+  const params = topArtistSearch.parse(new URL(request.url).searchParams)
+
+  await serverTiming.track('spotify.session', () =>
+    spotifyStrategy.getSession(request, {
+      failureRedirect: config.requiredLoginFailureRedirect,
+    }),
+  )
+
+  const spotify = await serverTiming.track('spotify.init', () =>
+    spotifyLib.initializeFromRequest(request, context),
+  )
+  const { album, targetArtist } = await retry(async (_, attempt) => {
+    const resp = await spotify.getRandomAlbumFromUsersTopArtists({
+      ...params,
+      related: true,
+    })
+    serverTiming.add({
+      label: 'attempts',
+      desc: `${attempt} Attempt(s)`,
+    })
+
+    return resp
+  }, config.asyncRetryConfig)
+  const wiki = await serverTiming.track('wikipedia', () =>
+    wikipedia.getSummaryForAlbum({
+      album: album.name,
+      artist: album.artists[0].name,
+    }),
+  )
+
+  return json(
+    {
+      album,
+      targetArtist,
+      wiki,
+    },
+    {
+      headers: {
+        'set-cookie': await userSettings.setLastPresented({
+          request,
+          lastPresented: album.id,
+        }),
+        [serverTiming.headerKey]: serverTiming.toString(),
+      },
+    },
+  )
+}
+
+export const ErrorBoundary = AlbumErrorBoundary
+export const headers = forwardServerTimingHeaders
+export const meta: AppMetaFunction<typeof loader> = ({ matches }) =>
+  mergeMeta(matches, [
+    { title: `Spotify Top Artist Relations | ${config.siteTitle}` },
+  ])
+
+export default function RandomAlbumFromRelatedTopArtistOnSpotify() {
+  const data = useLoaderData<typeof loader>()
+  const headerBreadcrumbs: SearchBreadcrumbsProps['crumbs'] = [
+    'Top Artists',
+    'Related',
+    [
+      data.targetArtist.name,
+      <Link key="artist-link" to={`/spotify/artist-id/${data.targetArtist.id}`}>
+        {data.targetArtist.name}
+      </Link>,
+    ],
+  ]
+
+  return (
+    <Layout hideFooter headerBreadcrumbs={headerBreadcrumbs}>
+      <Album album={data.album} wiki={data.wiki} />
+    </Layout>
+  )
+}

app/routes/spotify.top-artists.tsx

@@ -49,7 +49,6 @@ export async function loader({ request, context }: LoaderArgs) {
       album,
       targetArtist,
       wiki,
-      params,
     },
     {
       headers: {
@@ -80,10 +79,6 @@ export default function RandomAlbumFromTopArtistOnSpotify() {
     ],
   ]
 
-  if (data.params.related) {
-    headerBreadcrumbs.splice(1, 0, 'Related')
-  }
-
   return (
     <Layout hideFooter headerBreadcrumbs={headerBreadcrumbs}>
       <Album album={data.album} wiki={data.wiki} />