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

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

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