[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>
</>
);
}