ruby bobcat
For some reason, calling invoke inside my component blocks the rendering of the entire component.
Strangely, when I call another function (setTimeout) that returns a promise in the same way with dummy data, I get the desired behavior (render a loading state for the initial null value, then update it to the actual value when it returns.
To be clear, the behavior I see with invoke is that the entire app hangs on the prior component, and until invoke returns a value nothing happens (the initial null value / loading state never occurs with invoke but it does with setTimeout). Here is the component.
import { invoke } from '@tauri-apps/api/tauri'
import { useEffect, useState } from "react";
function Balances() {
const [balance, setBalance] = useState<null | string>(null);
useEffect(() => {
// Uncommenting this blocks the rendering of the entire component (???)
// async function getBalance() {
// const b = await invoke("get_balance") as string;
// setBalance(b as string);
// }
// getBalance();
// This equivalent delay of setting a dummy balance allows the component
// to render as desured with balance=null (a loading state), and then
// 5 seconds later updates the balance value and re-renders successfully
async function getSleep() {
console.log("started sleep");
await setTimeout(() => {
console.log("ended sleep");
setBalance("199");
}, 5000);
}
getSleep();
}, [])
return (
<>
{balance === null ? (
"Loading"
) : (
<div>
{balance}
</div>
)}
</>
)
}
export default Balances
spiral stump