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 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 { motion, useAnimation, Variants } from "framer-motion";
import { useCallback, useEffect, useState } from "react";
@ -72,6 +72,7 @@ export default function PlayerScores({
);
const isSearchActive = debouncedSearchTerm.length >= 3;
const [shouldFetch, setShouldFetch] = useState(false); // New state to control fetching
// Debounce the search query
useEffect(() => {
@ -98,7 +99,8 @@ export default function PlayerScores({
},
staleTime: 30 * 1000, // 30 seconds
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 () => {
@ -112,6 +114,7 @@ export default function PlayerScores({
const handleSortChange = (newSort: ScoreSort) => {
if (newSort !== pageState.sort) {
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) => {
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 = () => {
@ -216,6 +224,7 @@ export default function PlayerScores({
onPageChange={(newPage) => {
setPreviousPage(pageState.page);
setPageState({ ...pageState, page: newPage });
setShouldFetch(true); // Set to true to trigger fetch on page change
}}
/>
</>