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

CodePudding user response：

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

CodePudding user response：

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

3. Add a onClick listener to trigger the download.

const getDownloadMessage = () => { 
  if (downloadStatus == 2) {
    return "Message1"
  }

  if (downloadStatus == 3) {
    return "Message2"
  }

  if (downloadStatus == 4) {
    return "Message3"
  }
}

with the following jsx under return

<button onClick={invokeDownload}>{getDownloadStatus()}</button>

where invokeDownload follows the signature

const invokeDownload = () => {
  // Your download code here.
  setDownloadStatus(1) // Notifying the component that the download has started.
}

4. Create a function checkDownloadStatus to check if the download has completed. You can find some examples here
5. Use the hook useEffect to handle timeouts, and state updates.

const getTimeOutDuration = () => { 
  if (downloadStatus === 2) {
    return 10 * 1000 // milliseconds
  }
  // Remaining conditionals
}
useEffect(() => { 
  const downloadComplete = checkDownloadStatus()

  if (!downloadComplete) { 
    const newDownloadStatus = downloadStatus   1
    setTimeOut(() => setDownloadStatus(newDownloadStatus), getTimeOut(newDownloadStatus))
  }
}, [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.

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>