fix(ssr): make the player page less jarring when initally loading
All checks were successful
deploy / deploy (push) Successful in 1m16s
All checks were successful
deploy / deploy (push) Successful in 1m16s
This commit is contained in:
parent
c251239e45
commit
8e5aeadce0
@ -60,41 +60,41 @@ const nextConfig = {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
// module.exports = withBundleAnalyzer(nextConfig);
|
module.exports = withBundleAnalyzer(nextConfig);
|
||||||
|
|
||||||
// // Injected content via Sentry wizard below
|
// Injected content via Sentry wizard below
|
||||||
|
|
||||||
// const { withSentryConfig } = require("@sentry/nextjs");
|
const { withSentryConfig } = require("@sentry/nextjs");
|
||||||
|
|
||||||
// module.exports = withSentryConfig(
|
module.exports = withSentryConfig(
|
||||||
// module.exports,
|
module.exports,
|
||||||
// {
|
{
|
||||||
// // For all available options, see:
|
// For all available options, see:
|
||||||
// // https://github.com/getsentry/sentry-webpack-plugin#options
|
// https://github.com/getsentry/sentry-webpack-plugin#options
|
||||||
|
|
||||||
// // Suppresses source map uploading logs during build
|
// Suppresses source map uploading logs during build
|
||||||
// silent: true,
|
silent: true,
|
||||||
// org: "sentry",
|
org: "sentry",
|
||||||
// project: "scoresaber-reloaded",
|
project: "scoresaber-reloaded",
|
||||||
// url: "https://sentry.fascinated.cc/",
|
url: "https://sentry.fascinated.cc/",
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// // For all available options, see:
|
// For all available options, see:
|
||||||
// // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
|
// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
|
||||||
|
|
||||||
// // Upload a larger set of source maps for prettier stack traces (increases build time)
|
// Upload a larger set of source maps for prettier stack traces (increases build time)
|
||||||
// widenClientFileUpload: false,
|
widenClientFileUpload: false,
|
||||||
|
|
||||||
// // Transpiles SDK to be compatible with IE11 (increases bundle size)
|
// Transpiles SDK to be compatible with IE11 (increases bundle size)
|
||||||
// transpileClientSDK: false,
|
transpileClientSDK: false,
|
||||||
|
|
||||||
// // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
|
// Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
|
||||||
// tunnelRoute: "/monitoring",
|
tunnelRoute: "/monitoring",
|
||||||
|
|
||||||
// // Hides source maps from generated client bundles
|
// Hides source maps from generated client bundles
|
||||||
// hideSourceMaps: true,
|
hideSourceMaps: true,
|
||||||
|
|
||||||
// // Automatically tree-shake Sentry logger statements to reduce bundle size
|
// Automatically tree-shake Sentry logger statements to reduce bundle size
|
||||||
// disableLogger: true,
|
disableLogger: true,
|
||||||
// },
|
},
|
||||||
// );
|
);
|
||||||
|
@ -1,9 +1,25 @@
|
|||||||
import PlayerPage from "@/components/player/PlayerPage";
|
import Card from "@/components/Card";
|
||||||
|
import Container from "@/components/Container";
|
||||||
|
import Spinner from "@/components/Spinner";
|
||||||
|
import PlayerChart from "@/components/player/PlayerChart";
|
||||||
|
import PlayerInfo from "@/components/player/PlayerInfo";
|
||||||
|
import Scores from "@/components/player/Scores";
|
||||||
|
import {
|
||||||
|
Tooltip,
|
||||||
|
TooltipContent,
|
||||||
|
TooltipTrigger,
|
||||||
|
} from "@/components/ui/Tooltip";
|
||||||
import ssrSettings from "@/ssrSettings.json";
|
import ssrSettings from "@/ssrSettings.json";
|
||||||
|
import { SortTypes } from "@/types/SortTypes";
|
||||||
import { formatNumber } from "@/utils/numberUtils";
|
import { formatNumber } from "@/utils/numberUtils";
|
||||||
import { ScoreSaberAPI } from "@/utils/scoresaber/api";
|
import { ScoreSaberAPI } from "@/utils/scoresaber/api";
|
||||||
import { normalizedRegionName } from "@/utils/utils";
|
import { normalizedRegionName } from "@/utils/utils";
|
||||||
|
import clsx from "clsx";
|
||||||
import { Metadata } from "next";
|
import { Metadata } from "next";
|
||||||
|
import Image from "next/image";
|
||||||
|
import { Suspense } from "react";
|
||||||
|
|
||||||
|
const DEFAULT_SORT_TYPE = SortTypes.top;
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
params: { id: string; sort: string; page: string };
|
params: { id: string; sort: string; page: string };
|
||||||
@ -61,10 +77,61 @@ async function getData(id: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default async function Player({ params: { id, sort, page } }: Props) {
|
export default async function Player({ params: { id, sort, page } }: Props) {
|
||||||
const { data } = await getData(id);
|
const { data: player } = await getData(id);
|
||||||
if (!data) {
|
if (!player) {
|
||||||
return <div>Player not found</div>;
|
return (
|
||||||
|
<main>
|
||||||
|
<Container>
|
||||||
|
<Card outerClassName="mt-2">
|
||||||
|
<h1 className="text-2xl font-bold">Player not found</h1>
|
||||||
|
</Card>
|
||||||
|
</Container>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return <PlayerPage player={data} sort={sort} page={page} />;
|
const sortType = SortTypes[sort] || DEFAULT_SORT_TYPE;
|
||||||
|
const badges = player.badges;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
<Container>
|
||||||
|
<PlayerInfo playerData={player} />
|
||||||
|
{/* Chart */}
|
||||||
|
<Card outerClassName="mt-2 min-h-[320px]">
|
||||||
|
{/* Badges */}
|
||||||
|
<div
|
||||||
|
className={clsx(
|
||||||
|
"mb-2 mt-2 flex flex-wrap items-center justify-center gap-2",
|
||||||
|
badges.length > 0 ? "block" : "hidden",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{badges.map((badge) => {
|
||||||
|
return (
|
||||||
|
<Tooltip key={badge.image}>
|
||||||
|
<TooltipTrigger>
|
||||||
|
<Image
|
||||||
|
src={badge.image}
|
||||||
|
alt={badge.description}
|
||||||
|
width={80}
|
||||||
|
height={30}
|
||||||
|
/>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>
|
||||||
|
<p>{badge.description}</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<div className="h-[320px] w-full">
|
||||||
|
<Suspense fallback={<Spinner />}>
|
||||||
|
<PlayerChart scoresaber={player} />
|
||||||
|
</Suspense>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
<Scores playerData={player} page={Number(page)} sortType={sortType} />
|
||||||
|
</Container>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,69 +0,0 @@
|
|||||||
import Card from "@/components/Card";
|
|
||||||
import Container from "@/components/Container";
|
|
||||||
import Scores from "@/components/player/Scores";
|
|
||||||
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
|
|
||||||
import { SortTypes } from "@/types/SortTypes";
|
|
||||||
import clsx from "clsx";
|
|
||||||
import Image from "next/image";
|
|
||||||
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/Tooltip";
|
|
||||||
import PlayerChart from "./PlayerChart";
|
|
||||||
import PlayerInfo from "./PlayerInfo";
|
|
||||||
|
|
||||||
type PlayerInfo = {
|
|
||||||
loading: boolean;
|
|
||||||
player: ScoresaberPlayer | undefined;
|
|
||||||
};
|
|
||||||
|
|
||||||
type PlayerPageProps = {
|
|
||||||
player: ScoresaberPlayer;
|
|
||||||
sort: string;
|
|
||||||
page: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const DEFAULT_SORT_TYPE = SortTypes.top;
|
|
||||||
|
|
||||||
export default function PlayerPage({ player, sort, page }: PlayerPageProps) {
|
|
||||||
const sortType = SortTypes[sort] || DEFAULT_SORT_TYPE;
|
|
||||||
|
|
||||||
const badges = player.badges;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<main>
|
|
||||||
<Container>
|
|
||||||
<PlayerInfo playerData={player} />
|
|
||||||
{/* Chart */}
|
|
||||||
<Card outerClassName="mt-2">
|
|
||||||
{/* Badges */}
|
|
||||||
<div
|
|
||||||
className={clsx(
|
|
||||||
"mb-2 mt-2 flex flex-wrap items-center justify-center gap-2",
|
|
||||||
badges.length > 0 ? "block" : "hidden",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{badges.map((badge) => {
|
|
||||||
return (
|
|
||||||
<Tooltip key={badge.image}>
|
|
||||||
<TooltipTrigger>
|
|
||||||
<Image
|
|
||||||
src={badge.image}
|
|
||||||
alt={badge.description}
|
|
||||||
width={80}
|
|
||||||
height={30}
|
|
||||||
/>
|
|
||||||
</TooltipTrigger>
|
|
||||||
<TooltipContent>
|
|
||||||
<p>{badge.description}</p>
|
|
||||||
</TooltipContent>
|
|
||||||
</Tooltip>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
<div className="h-[320px] w-full">
|
|
||||||
<PlayerChart scoresaber={player} />
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
<Scores playerData={player} page={Number(page)} sortType={sortType} />
|
|
||||||
</Container>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
|
@ -6,6 +6,7 @@ import { useSettingsStore } from "@/store/settingsStore";
|
|||||||
import { SortType, SortTypes } from "@/types/SortTypes";
|
import { SortType, SortTypes } from "@/types/SortTypes";
|
||||||
import { ScoreSaberAPI } from "@/utils/scoresaber/api";
|
import { ScoreSaberAPI } from "@/utils/scoresaber/api";
|
||||||
import useStore from "@/utils/useStore";
|
import useStore from "@/utils/useStore";
|
||||||
|
import clsx from "clsx";
|
||||||
import dynamic from "next/dynamic";
|
import dynamic from "next/dynamic";
|
||||||
import { useCallback, useEffect, useState } from "react";
|
import { useCallback, useEffect, useState } from "react";
|
||||||
import Card from "../Card";
|
import Card from "../Card";
|
||||||
@ -99,7 +100,13 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card outerClassName="mt-2" className="w-full items-center md:flex-col">
|
<Card
|
||||||
|
outerClassName="mt-2"
|
||||||
|
className={clsx(
|
||||||
|
"w-full items-center md:flex-col",
|
||||||
|
scores.loading && "min-h-[1050px]",
|
||||||
|
)}
|
||||||
|
>
|
||||||
{/* Sort */}
|
{/* Sort */}
|
||||||
<div className="mb-2 mt-1 w-full text-sm">
|
<div className="mb-2 mt-1 w-full text-sm">
|
||||||
<div className="flex justify-center gap-2">
|
<div className="flex justify-center gap-2">
|
||||||
@ -124,13 +131,14 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="w-full p-1">
|
<div className="flex h-full w-full flex-col items-center justify-center">
|
||||||
{scores.loading ? (
|
{scores.loading ? (
|
||||||
<div className="flex justify-center">
|
<div className="mt-2">
|
||||||
<Spinner />
|
<Spinner />
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="grid grid-cols-1 divide-y divide-border">
|
<>
|
||||||
|
<div className="grid min-w-full grid-cols-1 divide-y divide-border">
|
||||||
{!scores.loading && scores.scores.length == 0 ? (
|
{!scores.loading && scores.scores.length == 0 ? (
|
||||||
<p className="text-red-400">{errorMessage}</p>
|
<p className="text-red-400">{errorMessage}</p>
|
||||||
) : (
|
) : (
|
||||||
@ -149,11 +157,7 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
|
|||||||
})
|
})
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Pagination */}
|
{/* Pagination */}
|
||||||
<div>
|
|
||||||
<div className="pt-3">
|
<div className="pt-3">
|
||||||
<Pagination
|
<Pagination
|
||||||
currentPage={scores.page}
|
currentPage={scores.page}
|
||||||
@ -163,6 +167,8 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user