lazy load some components
All checks were successful
deploy / deploy (push) Successful in 59s

This commit is contained in:
Lee 2023-11-08 09:55:20 +00:00
parent 26490bbad4
commit fb0e8a7ea1
3 changed files with 33 additions and 6 deletions

@ -1,4 +1,7 @@
const nextBuildId = require("next-build-id"); const nextBuildId = require("next-build-id");
const withBundleAnalyzer = require("@next/bundle-analyzer")({
enabled: false,
});
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
const nextConfig = { const nextConfig = {
@ -57,7 +60,9 @@ const nextConfig = {
}, },
}; };
module.exports = nextConfig; module.exports = withBundleAnalyzer(nextConfig);
// // Injected content via Sentry wizard below
// const { withSentryConfig } = require("@sentry/nextjs"); // const { withSentryConfig } = require("@sentry/nextjs");

@ -1,6 +1,5 @@
import Card from "@/components/Card"; import Card from "@/components/Card";
import Container from "@/components/Container"; import Container from "@/components/Container";
import PlayerChart from "@/components/player/PlayerChart";
import PlayerInfo from "@/components/player/PlayerInfo"; import PlayerInfo from "@/components/player/PlayerInfo";
import Scores from "@/components/player/Scores"; import Scores from "@/components/player/Scores";
import { import {
@ -15,7 +14,11 @@ import { ScoreSaberAPI } from "@/utils/scoresaber/api";
import { normalizedRegionName } from "@/utils/utils"; import { normalizedRegionName } from "@/utils/utils";
import clsx from "clsx"; import clsx from "clsx";
import { Metadata } from "next"; import { Metadata } from "next";
import dynamic from "next/dynamic";
import Image from "next/image"; import Image from "next/image";
import { Fragment, Suspense } from "react";
const PlayerChart = dynamic(() => import("@/components/player/PlayerChart"));
const DEFAULT_SORT_TYPE = SortTypes.top; const DEFAULT_SORT_TYPE = SortTypes.top;
@ -129,7 +132,11 @@ export default async function Player({ params: { id, sort, page } }: Props) {
})} })}
</div> </div>
<div className="h-[320px] w-full"> <div className="h-[320px] w-full">
<Fragment>
<Suspense>
<PlayerChart scoresaber={player} /> <PlayerChart scoresaber={player} />
</Suspense>
</Fragment>
</div> </div>
</Card> </Card>
<Scores <Scores

@ -2,12 +2,19 @@ import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
import { formatNumber } from "@/utils/numberUtils"; import { formatNumber } from "@/utils/numberUtils";
import { normalizedRegionName } from "@/utils/utils"; import { normalizedRegionName } from "@/utils/utils";
import { GlobeAsiaAustraliaIcon } from "@heroicons/react/20/solid"; import { GlobeAsiaAustraliaIcon } from "@heroicons/react/20/solid";
import dynamic from "next/dynamic";
import { Fragment, Suspense } from "react";
import Avatar from "../Avatar"; import Avatar from "../Avatar";
import Card from "../Card"; import Card from "../Card";
import CountyFlag from "../CountryFlag"; import CountyFlag from "../CountryFlag";
import Label from "../Label"; import Label from "../Label";
import PlayerInfoExtraLabels from "./PlayerInfoExtraLabels";
/**
* import PlayerInfoExtraLabels from "./PlayerInfoExtraLabels";
import PlayerSettingsButtons from "./PlayerSettingsButtons"; import PlayerSettingsButtons from "./PlayerSettingsButtons";
*/
const PlayerInfoExtraLabels = dynamic(() => import("./PlayerInfoExtraLabels"));
const PlayerSettingsButtons = dynamic(() => import("./PlayerSettingsButtons"));
type PlayerInfoProps = { type PlayerInfoProps = {
playerData: ScoresaberPlayer; playerData: ScoresaberPlayer;
@ -28,7 +35,11 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
{/* Settings Buttons */} {/* Settings Buttons */}
<div className="absolute right-3 top-20 flex flex-col justify-end gap-2 md:relative md:right-0 md:top-0 md:mt-2 md:flex-row md:justify-center"> <div className="absolute right-3 top-20 flex flex-col justify-end gap-2 md:relative md:right-0 md:top-0 md:mt-2 md:flex-row md:justify-center">
<Fragment>
<Suspense>
<PlayerSettingsButtons playerData={playerData} /> <PlayerSettingsButtons playerData={playerData} />
</Suspense>
</Fragment>
</div> </div>
</div> </div>
@ -125,7 +136,11 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
value={formatNumber(scoreStats.replaysWatched)} value={formatNumber(scoreStats.replaysWatched)}
/> />
<Fragment>
<Suspense>
<PlayerInfoExtraLabels playerId={playerData.id} /> <PlayerInfoExtraLabels playerId={playerData.id} />
</Suspense>
</Fragment>
</div> </div>
</div> </div>
</div> </div>