I want to add the name of my mailbox at the top of my page but it shows for few seconds and goes off.
What I want is for e.g. INBOX to show at the top of the page, then all the inbox mails will be below the title.
The INBOX shows for nanoseconds and then my inbox mails load and overshadows it.
How can I resolve this?
function load_mailbox(mailbox) {
// Show the mailbox and hide other views
document.querySelector('#emails-view').style.display = 'block';
document.querySelector('#compose-view').style.display = 'none';
document.querySelector('#content-view').style.display = 'none';
//Show the mailbox name
document.querySelector('#emails-view').innerHTML = `<h3>${mailbox.charAt(0).toUpperCase() + mailbox.slice(1)}</h3>`;
// display details of mailbox
let output = '';
// using get request to retrieve details
fetch(`/emails/${mailbox}`)
.then(response => response.json())
.then(emails => {
emails.forEach(email => {
//display subjecct, sender and timestamp of mail
output += `<div class="mail" onclick="viewEmail(${email.id}, ${mailbox})">
<button class="btn pr-5" style="min-width: 120px; display: inline-block;">${email.sender}</button>
<button class="btn">${email.subject}</button>
<button class="badge float-right">${email.timestamp}</button>
<span class="list-group-item"></span>
</div>`;
})
//add to html emails view
let emailList = document.querySelector('#emails-view');
emailList.innerHTML = output;
});
}<div id="emails-view">
</div>Your mailbox name is being overwritten as soon as your fetch request is processed.
You have two options.
#2 is far more preferable.