Как показать счетчик загрузки после использования router.push() в next.js?

Я использую «реагирующую форму» и shadcn. Я хочу показать счетчик загрузки, когда пользователь отправляет форму. Новые данные извлекаются page.tsx каждый раз, когда изменяется запрос. Этот процесс занимает некоторое время, и я хочу дать пользователю обратную связь, что ему придется подождать с загрузочным счетчиком.

Что я пробовал до сих пор:

• в ожидании (с помощью useFormStatus() из реакции-дома)
• form.formState.isSubmitting (с помощью useForm() из формы реакции)
• загрузка — setLoading (с помощью useState() из реакции)

Минимальный пример:

export function DatePickerForm() {
  const router = useRouter();
  const { from } = useDateRange(); // just receives the from date from the searchParams

  const form = useForm<z.infer<typeof FormSchema>>();

  async function onSubmit(data: z.infer<typeof FormSchema>) {
    const from = format(data.from, "yyyy-MM-dd");
    router.push(`/?from=${from}`);
  }

  return (
      <Form {...form}>
        <form onSubmit = {form.handleSubmit(onSubmit)} className = "space-y-4">
          <div className = "flex flex-row space-x-4">
            <FormField
              control = {form.control}
              name = "from"
              render = {({ field }) => (
                <FormItem className = "flex flex-col">
                  <FormLabel>Von</FormLabel>
                  <Popover>
                    <PopoverTrigger asChild>
                      <FormControl>
                        <Button
                          variant = {"outline"}
                          className = {cn(
                            "w-[240px] pl-3 text-left font-normal",
                            !field.value && "text-muted-foreground"
                          )}
                        >
                          {field.value ? (
                            format(field.value, "PPP", { locale: de })
                          ) : (
                            <span>Pick date</span>
                          )}
                          <CalendarIcon className = "ml-auto h-4 w-4 opacity-50" />
                        </Button>
                      </FormControl>
                    </PopoverTrigger>

                    <PopoverContent className = "w-auto p-0" align = "start">
                      <Calendar
                        mode = "single"
                        selected = {field.value}
                        onSelect = {field.onChange}
                        disabled = {(date) =>
                          date > new Date() || date < new Date("1900-01-01")
                        }
                        initialFocus
                      />
                    </PopoverContent>
                  </Popover>
                  <FormMessage />
                </FormItem>
              )}
            />

          </div>

          <Button disabled = {//HELP HERE!} type = "submit">
            {/* //HELP HERE! <Loader2 className = "mr-2 h-4 w-4 animate-spin" /> */}
            Suchen
          </Button>
        </form>
      </Form>
  );
}