dynamic import some components to make the bundle size smaller
All checks were successful
deploy / deploy (push) Successful in 54s
All checks were successful
deploy / deploy (push) Successful in 54s
This commit is contained in:
parent
b2c9ff412b
commit
86cfa7686f
@ -1,4 +1,4 @@
|
|||||||
export function Spinner() {
|
export default function Spinner() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<svg
|
<svg
|
||||||
|
@ -3,18 +3,20 @@
|
|||||||
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
|
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
|
||||||
import { ScoreSaberAPI } from "@/utils/scoresaber/api";
|
import { ScoreSaberAPI } from "@/utils/scoresaber/api";
|
||||||
import { normalizedRegionName } from "@/utils/utils";
|
import { normalizedRegionName } from "@/utils/utils";
|
||||||
|
import dynamic from "next/dynamic";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { useCallback, useEffect, useState } from "react";
|
import { useCallback, useEffect, useState } from "react";
|
||||||
import ReactCountryFlag from "react-country-flag";
|
|
||||||
import Card from "../Card";
|
import Card from "../Card";
|
||||||
import Container from "../Container";
|
import Container from "../Container";
|
||||||
import Error from "../Error";
|
|
||||||
import Pagination from "../Pagination";
|
import Pagination from "../Pagination";
|
||||||
import { Spinner } from "../Spinner";
|
import Spinner from "../Spinner";
|
||||||
import PlayerRanking from "./PlayerRanking";
|
import PlayerRanking from "./PlayerRanking";
|
||||||
import PlayerRankingMobile from "./PlayerRankingMobile";
|
import PlayerRankingMobile from "./PlayerRankingMobile";
|
||||||
|
|
||||||
|
const ReactCountryFlag = dynamic(() => import("react-country-flag"));
|
||||||
|
const Error = dynamic(() => import("@/components/Error"));
|
||||||
|
|
||||||
type PageInfo = {
|
type PageInfo = {
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
page: number;
|
page: number;
|
||||||
|
@ -12,8 +12,8 @@ import {
|
|||||||
HomeIcon,
|
HomeIcon,
|
||||||
UserIcon,
|
UserIcon,
|
||||||
} from "@heroicons/react/20/solid";
|
} from "@heroicons/react/20/solid";
|
||||||
|
import dynamic from "next/dynamic";
|
||||||
import { useRef } from "react";
|
import { useRef } from "react";
|
||||||
import ReactCountryFlag from "react-country-flag";
|
|
||||||
import { toast } from "react-toastify";
|
import { toast } from "react-toastify";
|
||||||
import { useStore } from "zustand";
|
import { useStore } from "zustand";
|
||||||
import Avatar from "../Avatar";
|
import Avatar from "../Avatar";
|
||||||
@ -21,6 +21,8 @@ import Card from "../Card";
|
|||||||
import Label from "../Label";
|
import Label from "../Label";
|
||||||
import PlayerChart from "./PlayerChart";
|
import PlayerChart from "./PlayerChart";
|
||||||
|
|
||||||
|
const ReactCountryFlag = dynamic(() => import("react-country-flag"));
|
||||||
|
|
||||||
type PlayerInfoProps = {
|
type PlayerInfoProps = {
|
||||||
playerData: ScoresaberPlayer;
|
playerData: ScoresaberPlayer;
|
||||||
};
|
};
|
||||||
|
@ -2,16 +2,18 @@
|
|||||||
|
|
||||||
import Card from "@/components/Card";
|
import Card from "@/components/Card";
|
||||||
import Container from "@/components/Container";
|
import Container from "@/components/Container";
|
||||||
import Error from "@/components/Error";
|
import Spinner from "@/components/Spinner";
|
||||||
import { Spinner } from "@/components/Spinner";
|
|
||||||
import PlayerInfo from "@/components/player/PlayerInfo";
|
|
||||||
import Scores from "@/components/player/Scores";
|
import Scores from "@/components/player/Scores";
|
||||||
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
|
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
|
||||||
import { useSettingsStore } from "@/store/settingsStore";
|
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 dynamic from "next/dynamic";
|
||||||
import { useSearchParams } from "next/navigation";
|
import { useSearchParams } from "next/navigation";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
|
import PlayerInfo from "./PlayerInfo";
|
||||||
|
|
||||||
|
const Error = dynamic(() => import("@/components/Error"));
|
||||||
|
|
||||||
type PlayerInfo = {
|
type PlayerInfo = {
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
|
@ -1,16 +1,18 @@
|
|||||||
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
|
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
|
||||||
import { useSettingsStore } from "@/store/settingsStore";
|
import { useSettingsStore } from "@/store/settingsStore";
|
||||||
import { formatNumber } from "@/utils/number";
|
import { formatNumber } from "@/utils/number";
|
||||||
|
import dynamic from "next/dynamic";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import ReactCountryFlag from "react-country-flag";
|
|
||||||
import { useStore } from "zustand";
|
import { useStore } from "zustand";
|
||||||
import Avatar from "../Avatar";
|
|
||||||
|
|
||||||
type PlayerRankingProps = {
|
type PlayerRankingProps = {
|
||||||
player: ScoresaberPlayer;
|
player: ScoresaberPlayer;
|
||||||
showCountryFlag?: boolean;
|
showCountryFlag?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const ReactCountryFlag = dynamic(() => import("react-country-flag"));
|
||||||
|
const Avatar = dynamic(() => import("@/components/Avatar"));
|
||||||
|
|
||||||
export default function PlayerRanking({
|
export default function PlayerRanking({
|
||||||
player,
|
player,
|
||||||
showCountryFlag,
|
showCountryFlag,
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
|
import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
|
||||||
import { useSettingsStore } from "@/store/settingsStore";
|
import { useSettingsStore } from "@/store/settingsStore";
|
||||||
import { formatNumber } from "@/utils/number";
|
import { formatNumber } from "@/utils/number";
|
||||||
import ReactCountryFlag from "react-country-flag";
|
import dynamic from "next/dynamic";
|
||||||
import { useStore } from "zustand";
|
import { useStore } from "zustand";
|
||||||
import Avatar from "../Avatar";
|
import Avatar from "../Avatar";
|
||||||
import Label from "../Label";
|
import Label from "../Label";
|
||||||
@ -11,6 +11,8 @@ type PlayerRankingProps = {
|
|||||||
showCountryFlag?: boolean;
|
showCountryFlag?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const ReactCountryFlag = dynamic(() => import("react-country-flag"));
|
||||||
|
|
||||||
export default function PlayerRankingMobile({
|
export default function PlayerRankingMobile({
|
||||||
player,
|
player,
|
||||||
showCountryFlag = true,
|
showCountryFlag = true,
|
||||||
|
@ -3,13 +3,15 @@ import { ScoresaberPlayerScore } from "@/schemas/scoresaber/playerScore";
|
|||||||
import { useSettingsStore } from "@/store/settingsStore";
|
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 dynamic from "next/dynamic";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { useCallback, useEffect, useState } from "react";
|
import { useCallback, useEffect, useState } from "react";
|
||||||
import Card from "../Card";
|
import Card from "../Card";
|
||||||
import Pagination from "../Pagination";
|
import Pagination from "../Pagination";
|
||||||
import { Spinner } from "../Spinner";
|
|
||||||
import Score from "./Score";
|
import Score from "./Score";
|
||||||
|
|
||||||
|
const Spinner = dynamic(() => import("@/components/Spinner"));
|
||||||
|
|
||||||
type PageInfo = {
|
type PageInfo = {
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
page: number;
|
page: number;
|
||||||
|
Loading…
Reference in New Issue
Block a user