Executando verificação de segurança...
1

[HELP] - Suspense chama o fallback depois do fetch (React + Nextjs13)

O fallback só é chamado quando o fetch termina. Não tenho certeza se é exatamente isso, mas visualmente, o elemento é removido da tela devido a setIsLoading(true). No entanto, o texto "Loading..." só aparece depois de algum tempo (tempo esse relacionado ao fetch, eu acredito).

É possível reverter isso?

"use client";

import React, { useState, Suspense } from "react";
import { ContentWithdrawI } from "./type";

//...Imports

type StatusWithdrawT = {
  idWithdraw: number;
  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
};

async function StatusWithdraw({ idWithdraw, setIsLoading }: StatusWithdrawT) {
  async function handlerStatusWithdraw(idWithdraw: number) {
    setIsLoading(true);

    const requestSendToogleStatusWithdraw = await fetch(
      `${process.env["NEXT_PUBLIC_HTTPCLIENT"]}/api/handler`,
      {
        method: "post",
        body: JSON.stringify({ idWithdraw }),
      }
    );
    const response = await requestSendToogleStatusWithdraw.json();

    setIsLoading(false);

    return response;
  }

  return (
    <td
      className={styles.sendValue}
      onClick={() => handlerStatusWithdraw(idWithdraw)}>
      Enviar
    </td>
  );
}

export function ContentWithdraw({ withdrawsPending }: ContentWithdrawI) {
  const [isLoading, setIsLoading] = useState(false);

  return (
    <>
      <TitlePage title="Saques Pendentes" />

      <Suspense fallback={<p>Loading...</p>}>
        {!isLoading && (
          <div
            className={`${styles.containerWithdraws} contentChildrenPlataform`}>
            <table className={styles.tableWithdraws}>
              <thead>
                <tr>
                  <th>Id</th>
                  <th>Chave</th>
                  <th>Tipo de chave</th>
                  <th>Valor</th>
                </tr>
              </thead>
              <tbody>
                {withdrawsPending.map((withdraw, index) => {
                  const valueFormated = withdraw.value.toLocaleString("pt-BR", {
                    style: "currency",
                    currency: "BRL",
                  });

                  return (
                    <tr key={index}>
                      <td>#{withdraw.id}</td>
                      <td>{withdraw.key_pix}</td>
                      <td>{withdraw.type_key_pix}</td>
                      <td>{valueFormated}</td>
                      <StatusWithdraw
                        setIsLoading={setIsLoading}
                        idWithdraw={withdraw.id}
                      />
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </Suspense>
    </>
  );
}
Carregando publicação patrocinada...