Fascinated/scoresaber-reloadedv3
Archived
1
1
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Activity

make leaderboard page not animate when loading it
All checks were successful
Deploy / deploy (push) Successful in 4m46s
Details

Browse Source
This commit is contained in:
Lee 2024-10-02 13:48:56 +01:00
parent bde65ea0b9
commit 49edd35a6c
4 changed files with 16 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/context/leaderboard-context.tsx
View File

@ -1,6 +0,0 @@
"use client";
import { createContext } from "react";
import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
export const LeaderboardContext = createContext<ScoreSaberLeaderboardToken | undefined>(undefined);

4
src/components/leaderboard/leaderboard-data.tsx
View File

@ -2,7 +2,6 @@
import ScoreSaberLeaderboardScoresPageToken from "@/common/model/token/scoresaber/score-saber-leaderboard-scores-page-token"; import ScoreSaberLeaderboardScoresPageToken from "@/common/model/token/scoresaber/score-saber-leaderboard-scores-page-token";
import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token"; import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
import { LeaderboardContext } from "@/components/context/leaderboard-context";
import LeaderboardScores from "@/components/leaderboard/leaderboard-scores"; import LeaderboardScores from "@/components/leaderboard/leaderboard-scores";
import { LeaderboardInfo } from "@/components/leaderboard/leaderboard-info"; import { LeaderboardInfo } from "@/components/leaderboard/leaderboard-info";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
@ -36,6 +35,7 @@ export function LeaderboardData({ initialPage, initialScores, initialLeaderboard
const { data: leaderboard } = useQuery({ const { data: leaderboard } = useQuery({
queryKey: ["leaderboard-" + initialLeaderboard.id, selectedLeaderboardId], queryKey: ["leaderboard-" + initialLeaderboard.id, selectedLeaderboardId],
queryFn: () => scoresaberService.lookupLeaderboard(selectedLeaderboardId + ""), queryFn: () => scoresaberService.lookupLeaderboard(selectedLeaderboardId + ""),
initialData: initialLeaderboard,
staleTime: 30 * 1000, // Cache data for 30 seconds staleTime: 30 * 1000, // Cache data for 30 seconds
}); });
@ -64,7 +64,6 @@ export function LeaderboardData({ initialPage, initialScores, initialLeaderboard
return ( return (
<main className="flex flex-col-reverse xl:flex-row w-full gap-2"> <main className="flex flex-col-reverse xl:flex-row w-full gap-2">
<LeaderboardContext.Provider value={currentLeaderboard}>
<LeaderboardScores <LeaderboardScores
leaderboard={currentLeaderboard} leaderboard={currentLeaderboard}
initialScores={initialScores} initialScores={initialScores}
@ -74,7 +73,6 @@ export function LeaderboardData({ initialPage, initialScores, initialLeaderboard
leaderboardChanged={id => setSelectedLeaderboardId(id)} leaderboardChanged={id => setSelectedLeaderboardId(id)}
/> />
<LeaderboardInfo leaderboard={currentLeaderboard} beatSaverMap={beatSaverMap} /> <LeaderboardInfo leaderboard={currentLeaderboard} beatSaverMap={beatSaverMap} />
</LeaderboardContext.Provider>
</main> </main>
); );
} }

8
src/components/leaderboard/leaderboard-scores.tsx
View File

@ -75,7 +75,7 @@ export default function LeaderboardScores({
const [currentPage, setCurrentPage] = useState(initialPage); const [currentPage, setCurrentPage] = useState(initialPage);
const [currentScores, setCurrentScores] = useState<ScoreSaberLeaderboardScoresPageToken | undefined>(initialScores); const [currentScores, setCurrentScores] = useState<ScoreSaberLeaderboardScoresPageToken | undefined>(initialScores);
const topOfScoresRef = useRef<HTMLDivElement>(null); const topOfScoresRef = useRef<HTMLDivElement>(null);
const [shouldFetch, setShouldFetch] = useState(false); // New state to control fetching const [shouldFetch, setShouldFetch] = useState(false);
const { const {
data: scores, data: scores,
@ -84,8 +84,8 @@ export default function LeaderboardScores({
} = useQuery({ } = useQuery({
queryKey: ["leaderboardScores-" + leaderboard.id, selectedLeaderboardId, currentPage], queryKey: ["leaderboardScores-" + leaderboard.id, selectedLeaderboardId, currentPage],
queryFn: () => scoresaberService.lookupLeaderboardScores(selectedLeaderboardId + "", currentPage), queryFn: () => scoresaberService.lookupLeaderboardScores(selectedLeaderboardId + "", currentPage),
staleTime: 30 * 1000, // Cache data for 30 seconds staleTime: 30 * 1000,
enabled: shouldFetch || isLeaderboardPage, enabled: (shouldFetch && isLeaderboardPage) || !isLeaderboardPage,
}); });
/** /**
@ -102,9 +102,9 @@ export default function LeaderboardScores({
*/ */
const handleLeaderboardChange = useCallback( const handleLeaderboardChange = useCallback(
(id: number) => { (id: number) => {
setShouldFetch(true);
setSelectedLeaderboardId(id); setSelectedLeaderboardId(id);
setCurrentPage(1); setCurrentPage(1);
setShouldFetch(true);
if (leaderboardChanged) { if (leaderboardChanged) {
leaderboardChanged(id); leaderboardChanged(id);

4
src/components/player/player-scores.tsx
View File

@ -52,7 +52,7 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
const [currentScores, setCurrentScores] = useState<ScoreSaberPlayerScoresPageToken | undefined>(initialScoreData); const [currentScores, setCurrentScores] = useState<ScoreSaberPlayerScoresPageToken | undefined>(initialScoreData);
const [searchTerm, setSearchTerm] = useState(initialSearch || ""); const [searchTerm, setSearchTerm] = useState(initialSearch || "");
const debouncedSearchTerm = useDebounce(searchTerm, 250); const debouncedSearchTerm = useDebounce(searchTerm, 250);
const [shouldFetch, setShouldFetch] = useState(false); // New state to control fetching const [shouldFetch, setShouldFetch] = useState(false);
const topOfScoresRef = useRef<HTMLDivElement>(null); const topOfScoresRef = useRef<HTMLDivElement>(null);
const isSearchActive = debouncedSearchTerm.length >= 3; const isSearchActive = debouncedSearchTerm.length >= 3;
@ -71,7 +71,7 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
}); });
}, },
staleTime: 30 * 1000, // 30 seconds staleTime: 30 * 1000, // 30 seconds
enabled: shouldFetch && (debouncedSearchTerm.length >= 3 || debouncedSearchTerm.length === 0), // Only enable if we set shouldFetch to true enabled: shouldFetch && (debouncedSearchTerm.length >= 3 || debouncedSearchTerm.length === 0),
}); });
/** /**