Load Message and settimeout

user_17451081 0
Viewed 177

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

reactjs javascript
3 Answers

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>

user_4779020

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);
}
user_131754670

In your specific case, you might do the following:

  1. You need to correct your syntax. Functions are invoked by using () following the namespace. E.g. greet1()
  2. Create a counter-based state (since it seems like your messages vary based on the "duration"). This allows us to determine the "time" that has passed.
const [downloadStatus, setDownloadStatus] = useState(0);
  1. Add a 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.
}
  1. Create a function checkDownloadStatus to check if the download has completed. You can find some examples here
  2. Use the hook useEffect 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.

user_102868750
Related