Hey guys i am relativly new to next.js and was wanderinf if there is a way to set the page back to the loading state on pushing searchparams using router.push. My Code currently looks like this:

-- dashboard/citizens/page.tsx

export default async function CitizensPage({ searchParams }: { searchParams: Promise<{ query?: string; page?: number }> }) {
    const citizens = await getCitizens({ searchParams: await searchParams });

    return (
        <>
            <PageHeader>
                <PageHeader.Title>Personen</PageHeader.Title>
                <PageHeader.Buttons>
                    <SearchQueryInput placeholder={'Person suchen...'} />
                </PageHeader.Buttons>
            </PageHeader>

            <Card className={'p-4'}>
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead>Name</TableHead>
                            <TableHead>Alias</TableHead>
                            <TableHead>Tags</TableHead>
                            <TableHead>Waffenschein gültig bis</TableHead>
                            <TableHead>Telefonnummer</TableHead>
                            <TableHead>Geschlecht</TableHead>
                            <TableHead>Geburtsdatum</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {citizens.map((citizen) => (
                            <TableRow key={citizen.id}>

                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </Card>
        </>
    );
}

-- SearchQueryInput.tsx

export function SearchQueryInput({ placeholder }: { placeholder?: string }) {
    const router = useRouter();
    const searchParams = useSearchParams();
    const [query, setQuery] = useState(searchParams.get('query') || '');

    const handleSearch = () => {
        if (!query.trim()) return router.push('?');

        const params = new URLSearchParams(searchParams.toString());

        params.set('query', query.trim());

        if (params.has('page')) params.delete('page');

        router.push(`?${params.toString()}`);
    };

    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
        if (e.key === 'Enter') {
            e.preventDefault();
            handleSearch();
        }
    };

    return (
        <div className="relative flex items-center h-8 text-sm border border-border rounded-md bg-input">
            <input type="text" name="query" className="outline-none px-2" placeholder={placeholder} onKeyDown={handleKeyDown} onChange={(e) => setQuery(e.target.value)} />
            <button type="submit" className="border border-border mx-auto mr-1 p-1 cursor-pointer rounded-md hover:bg-sidebar/10 transition-colors duration-300" onClick={handleSearch}>
                <SearchIcon size={12} className={'text-foreground/80'} />
            </button>
        </div>
    );
}