Potentional problem in Nextjs data fetching

[emimaricic]

Hey guys, I have noticed something through building my app.
I'm using Next 14, and I have async table with pagination, search filters, and many more filters that triggers router.push function.
First problem I noticed is loading, I have loading.tsx which triggers when I render the page first time, but when query params my client data table doesn't know when the fetch is happening. I have tried to add supsense fallback but doesn't work. I would be great if other content is shown but data table when its loading, loading ui shows just like it's displayed on suspense fallback
Second problem I noticed is unwanted fetches, to explain you as better as I can, in my example I'm fetching football players, and with that fetch I also have fetch call for countries, leagues and seasons. Those data shouldn't be fetched I only want to fetch filtered player data.
Does anyone have an idea for those 2 problems? Code structure:

const PlayersPage = async ({
  searchParams,
}: {
  searchParams: { [key: string]: string | string[] | undefined };
}) => {
  const user = await currentUser();

  if (!user?.id) {
    redirect("/auth/login");
  }

  const { players, total } = await getPlayers(searchParams, user?.access_token);
  const { countries } = await getCountries(user.access_token);
  const { leagues } = await getLeagues(user.access_token);
  const { seasons } = await getSeasons(user.access_token);

  const formatedPlayers: PlayersColumn[] = players.map(
    (item: ExtendedPlayer) => {
      return {
         // ...
      };
    },
  );

  return (
      <PlayersClient
        initialPlayers={formatedPlayers}
        total={total}
        countries={countries}
        leagues={leagues}
        seasons={seasons}
      />
  );
};

export const PlayersClient: React.FC<PlayersClientProps> = ({
  total, initialPlayers, countries, leagues, seasons,
}) => {
  const [text, setText] = useState(paramsObject.search || "");
  const [searchQuery] = useDebounce(text, 750);

useEffect(() => {
    if (searchQuery) {
         router.push(`?${filtersStringNoPage}&search=${searchQuery}&page=0`);
    } else if (searchQuery === "") router.push(`?${filtersString}`);
    // eslint-disable-next-line
  }, [searchQuery]);
 return (
    <div className="flex flex-1 flex-col overflow-hidden">
      <div className="flex w-full items-center gap-4 rounded-[16px] bg-card p-4">
        // ...
        {seasons && (
          <div className="w-full space-y-1">
            <label className="text-sm text-muted-foreground">Seasons</label>
            <MultiSelect
              options={seasonOptions}
              onValueChange={setSelectedSeasons}
              defaultValue={selectedSeasons}
              setMenuOpen={setSeasonsMenuOpen}
              menuOpen={seasonsMenuOpen}
            />
          </div>
        )}
        <div className="mb-[2px] flex h-full w-full flex-col items-end gap-2">
          <div className="relative w-full">
            <Input
              placeholder="Search..."
              value={text}
              onChange={(e) => setText(e.target.value)}
              className="rounded-[8px] bg-primary-foreground"
            />
          </div>
        </div>
      </div>
      <div className="flex flex-1 gap-x-2 overflow-hidden">
        <Filters total={total} limitPerPage={10} resetAll={resetAllFilters} />
        <Suspense key={uuidv4()} fallback={<p>Loading...</p>}>
          <DataTable
            columns={columns}
            data={initialPlayers}
            total={total}
            onRowClick={["id", onRowClick]}
            setOpenFilters={setOpenFilters}
          />
        </Suspense>
        <MetricFilters resetAll={resetAllFilters} />
      </div>
    </div>
  );
}