I want to add loading message for export file button if it takes time to load for example first message "please wait" after 10 seconds settimeout to "loading..." after 20secound "sorry, please wait"
const [loading, setLoading] = useState(false);
function greet1() {
return "please wait.."
}
function greet2() {
return "loading"
}
function greet3() {
return "sorry, please wait..."
}
const list= () => {
setLoading(true)
if (loading) {
setTimeout(() => {
greet1
}, 0);
setTimeout(() => {
greet2
}, 2000);
setTimeout(() => {
greet3
}, 3000);
}
}
you can write:
if (loading) {
let time = 0;
setTimeout(() => {
switch(time) {
case 2:
alert("please wait...");
break;
case 5:
alert("loading...");
break;
case 10:
alert("sorry, please wait...");
break;
}
time++;
}, 1000);
}
In your specific case, you might do the following:
() following the namespace.
E.g. greet1()const [downloadStatus, setDownloadStatus] = useState(0);
onClick listener to trigger the download.const messageDownloadPairs = {
1: ["Message1", 0],
2: ["Message2", 10 * 1000]
3: ["Message3", 20 * 1000]
}
const getDownloadMessageTimePair = (status) =>
messages[Math.min(status, Object.values(messages).length)]
with the following jsx under return
<button onClick={invokeDownload}>{getDownloadMessage(downloadStatus)[0]}</button>
where invokeDownload follows the signature
const invokeDownload = () => {
// Your download code here.
setDownloadStatus(1) // Notifying the component that the download has started.
}
checkDownloadStatus to check if the download has completed. You can find some examples hereuseEffect to handle timeouts, and state updates.useEffect(() => {
const downloadComplete = checkDownloadStatus()
if (!downloadComplete) {
const newDownloadStatus = downloadStatus + 1
setTimeOut(
() => setDownloadStatus(newDownloadStatus),
getDownloadMessageTimePair(downloadStatus)[1]
)
}
}, [downloadStatus])
With this, you have a "progress-supported" button to track your csv download. I'll update this when I get more information on the specifics of your project.
I am not sure how is your code in React but in simple JS it works. Just tweak it for your need.
Updated: added ability to write inside message div.
var message = document.getElementById("message");
function greet1() {
message.innerHTML = "please wait..";
}
function greet2() {
message.innerHTML= "loading";
}
function greet3() {
message.innerHTML= "sorry, please wait...";
}
var loading = true;
if (loading) {
setTimeout(() => {
greet1();
}, 0);
setTimeout(() => {
greet2();
}, 2000);
setTimeout(() => {
greet3();
}, 3000);
}
<div id="message" ></div>