Remove loading states; just use nprogress

switz · switz · commit 24305c92eb92 · 2024-11-22T05:13:09.000-05:00
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "mousetrap": "1.6.5",
     "next": "15.0.3",
     "next-redux-wrapper": "8.1.0",
+    "nextjs-toploader": "^3.7.15",
     "node-device-detector": "^2.1.0",
     "react": "19.0.0-rc-66855b96-20241106",
     "react-dom": "19.0.0-rc-66855b96-20241106",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/(main)/(home)/[artistSlug]/[year]/[month]/[day]/layout.tsx b/src/app/(main)/(home)/[artistSlug]/[year]/[month]/[day]/layout.tsx
@@ -1,5 +1,5 @@
 import { MainLayoutProps } from '@/app/(main)/(home)/layout';
-import { useIsMobile } from '@/app/(main)/(home)/page';
+import { isMobile } from '@/app/(main)/(home)/page';
 import { fetchShow } from '@/app/queries';
 import SongsColumn from '@/components/SongsColumn';
 import TapesColumn from '@/components/TapesColumn';
@@ -12,7 +12,7 @@ export default async function Page(props: MainLayoutProps) {
 
   const { children } = props;
 
-  const isMobile = useIsMobile();
+  const isMobileClient = await isMobile();
   const { artistSlug, year, month, day } = params;
 
   if (!year || !month || !day) return notFound();
@@ -22,7 +22,7 @@ export default async function Page(props: MainLayoutProps) {
   return (
     <React.Fragment key={[artistSlug, year, month, day].join('::')}>
       <SongsColumn artistSlug={artistSlug} year={year} month={month} day={day} show={show} />
-      {!isMobile && (
+      {!isMobileClient && (
         <TapesColumn artistSlug={artistSlug} year={year} month={month} day={day} show={show} />
       )}
       {children}
diff --git a/src/app/(main)/(home)/[artistSlug]/[year]/loading.tsx b/src/app/(main)/(home)/[artistSlug]/[year]/loading.tsx
diff --git a/src/app/(main)/(home)/[artistSlug]/loading.tsx b/src/app/(main)/(home)/[artistSlug]/loading.tsx
diff --git a/src/app/(main)/(home)/[artistSlug]/page.tsx b/src/app/(main)/(home)/[artistSlug]/page.tsx
@@ -6,7 +6,7 @@ import { API_DOMAIN } from '@/lib/constants';
 import { Tape } from '@/types';
 import ky from 'ky-universal';
 import { notFound } from 'next/navigation';
-import { useIsMobile } from '../page';
+import { isMobile } from '../page';
 import React from 'react';
 
 export const fetchRandomShow = async (slug?: string): Promise<Tape | undefined> => {
@@ -23,7 +23,7 @@ export default async function Page(props) {
   const params = await props.params;
   const { artistSlug } = params;
 
-  if (useIsMobile()) return null;
+  if (await isMobile()) return null;
 
   const randomShow = await fetchRandomShow(artistSlug).catch((err) => {
     const statusCode = err?.response?.status;
diff --git a/src/app/(main)/(home)/page.tsx b/src/app/(main)/(home)/page.tsx
@@ -1,15 +1,15 @@
+import { headers } from 'next/headers';
 import parser from 'ua-parser-js';
-import { headers, type UnsafeUnwrappedHeaders } from 'next/headers';
 
 import ShowsColumn from '@/components/ShowsColumn';
 import SongsColumn from '@/components/SongsColumn';
 import TapesColumn from '@/components/TapesColumn';
 import YearsColumn from '@/components/YearsColumn';
-import { fetchRandomShow } from './[artistSlug]/page';
 import React from 'react';
+import { fetchRandomShow } from './[artistSlug]/page';
 
-export const useIsMobile = () => {
-  const headersList = (headers() as unknown as UnsafeUnwrappedHeaders);
+export const isMobile = async () => {
+  const headersList = await headers();
   const userAgent = headersList.get('user-agent');
 
   if (!userAgent) return false;
@@ -20,7 +20,7 @@ export const useIsMobile = () => {
 };
 
 export default async function Page() {
-  if (useIsMobile()) return null;
+  if (await isMobile()) return null;
 
   const artistSlug = 'grateful-dead';
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import { Roboto } from 'next/font/google';
 import dns from 'node:dns';
 import React from 'react';
 import Providers from './Providers';
+import NextTopLoader from 'nextjs-toploader';
 
 // https://github.com/node-fetch/node-fetch/issues/1624#issuecomment-1407717012
 dns.setDefaultResultOrder('ipv4first');
@@ -19,6 +20,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <link rel="icon" href="/favicon.ico" />
       </head>
       <body className={roboto.className}>
+        <NextTopLoader />
         <Link href="https://en.wikipedia.org/wiki/Phil_Lesh" target="_blank">
           <div className="fixed top-0 z-10 h-2 w-full bg-black" />
         </Link>
diff --git a/src/components/Row.tsx b/src/components/Row.tsx
@@ -74,11 +74,11 @@ const Row = ({
         {...props}
       >
         {loading && <RowLoading />}
-        {/* {isPending && (
+        {isPending && (
           <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 opacity-40">
             <Spinner />
           </div>
-        )} */}
+        )}
         {isPending && <div className="w-2 animate-pulse bg-black/30" />}
 
         {!isPending && isActive && <div className="w-2 bg-black/75" />}
