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

don't animate score on initial page load
All checks were successful
Deploy / deploy (push) Successful in 2m57s
Details

Browse Source
This commit is contained in:
Lee 2024-09-28 14:14:29 +01:00
parent 998484a682
commit 891b910686
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import { capitalizeFirstLetter } from "@/common/string-utils"; import { capitalizeFirstLetter } from "@/common/string-utils";
import useWindowDimensions from "@/hooks/use-window-dimensions"; import useWindowDimensions from "@/hooks/use-window-dimensions";
import { ClockIcon, TrophyIcon, XMarkIcon } from "@heroicons/react/24/solid"; // Import XMarkIcon for the clear button import { ClockIcon, TrophyIcon, XMarkIcon } from "@heroicons/react/24/solid";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { motion, useAnimation, Variants } from "framer-motion"; import { motion, useAnimation, Variants } from "framer-motion";
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
@ -72,6 +72,7 @@ export default function PlayerScores({
); );
const isSearchActive = debouncedSearchTerm.length >= 3; const isSearchActive = debouncedSearchTerm.length >= 3;
const [shouldFetch, setShouldFetch] = useState(false); // New state to control fetching
// Debounce the search query // Debounce the search query
useEffect(() => { useEffect(() => {
@ -98,7 +99,8 @@ export default function PlayerScores({
}, },
staleTime: 30 * 1000, // 30 seconds staleTime: 30 * 1000, // 30 seconds
enabled: enabled:
debouncedSearchTerm.length >= 3 || debouncedSearchTerm.length === 0, // Enable if valid search query or empty shouldFetch &&
(debouncedSearchTerm.length >= 3 || debouncedSearchTerm.length === 0), // Only enable if we set shouldFetch to true
}); });
const handleScoreLoad = useCallback(async () => { const handleScoreLoad = useCallback(async () => {
@ -112,6 +114,7 @@ export default function PlayerScores({
const handleSortChange = (newSort: ScoreSort) => { const handleSortChange = (newSort: ScoreSort) => {
if (newSort !== pageState.sort) { if (newSort !== pageState.sort) {
setPageState({ page: 1, sort: newSort }); setPageState({ page: 1, sort: newSort });
setShouldFetch(true); // Set to true to trigger fetch
} }
}; };
@ -130,6 +133,11 @@ export default function PlayerScores({
const handleSearchChange = (query: string) => { const handleSearchChange = (query: string) => {
setSearchState({ query }); setSearchState({ query });
if (query.length >= 3) {
setShouldFetch(true); // Set to true to trigger fetch
} else {
setShouldFetch(false); // Disable fetch if the search query is less than 3 characters
}
}; };
const clearSearch = () => { const clearSearch = () => {
@ -216,6 +224,7 @@ export default function PlayerScores({
onPageChange={(newPage) => { onPageChange={(newPage) => {
setPreviousPage(pageState.page); setPreviousPage(pageState.page);
setPageState({ ...pageState, page: newPage }); setPageState({ ...pageState, page: newPage });
setShouldFetch(true); // Set to true to trigger fetch on page change
}} }}
/> />
</> </>