On click html loader reappear and disappear

Question

I have this code below that consists of a HTML tab populated with some DOM elements that is dynamically created. I currently have a animation loader inside my tab which disappears after the content inside the tab is fully loaded.

I have a button that repopulate's my tab and what i'm trying to accomplish is when i click the button the content in the tab will be cleared and the loader will reappear, and once the tab is repopulated with the new data the loader will disappear.

Is there an easy way to accomplish this the method i'm currently trying below doesn't seems to work. I have added some comments of what i tried in the codes any help would be greatly appreciated thank you.

 var personArr = []; var person = { ["first-Name"]: "John", ["last-Name"]: "Doe", ["age"]: 21, ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin." }; var person2 = { ["first-Name"]: "Paul", ["last-Name"]: "Logan", ["age"]: 22, ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. " }; var person3 = { ["first-Name"]: "Sean", ["last-Name"]: "Kim", ["age"]: 32, ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin." }; var person4 = { ["first-Name"]: "Ken", ["last-Name"]: "Chow", ["age"]: 12, ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin." }; personArr.push(person, person2, person3, person4); var parent = document.getElementsByClassName('line1')[0]; var frag = document.createDocumentFragment(); personArr.forEach((person, i) => { var name = document.createElement('h4'); var desc = document.createElement('p'); var button = document.createElement('div'); name.textContent = `${person['first-Name']} ${person['last-Name']}`; desc.textContent = ` ${person['person-desc']}`; frag.appendChild(name); frag.appendChild(desc); }); parent.appendChild(frag); loader.style.display = 'none'; // This makes the loader disappear once content is loaded. function updateTab() { var anotherArr = []; var person5 = { ["first-Name"]: "Jun", ["last-Name"]: "Kim", ["age"]: 18, ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin." }; var person6 = { ["first-Name"]: "Scooby", ["last-Name"]: "Doo", ["age"]: 18, ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. " }; var person7 = { ["first-Name"]: "Seiya", ["last-Name"]: "Shun", ["age"]: 18, ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin." }; var person8 = { ["first-Name"]: "Ikki", ["last-Name"]: "Hyuga", ["age"]: 18, ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin." }; anotherArr.push(person5, person6, person7, person8); var parent = document.getElementsByClassName('line1')[0]; var frag = document.createDocumentFragment(); anotherArr.forEach((person, i) => { var name = document.createElement('h4'); var desc = document.createElement('p'); var button = document.createElement('div'); name.className = "lol"; name.textContent = `${person['first-Name']} ${person['last-Name']}`; desc.textContent = ` ${person['person-desc']}`; frag.appendChild(name); frag.appendChild(desc); }); loader.style.display = 'block'; // Trying to make loader reappear parent.innerHTML = ""; parent.appendChild(frag); loader.style.display = 'none'; // Disappear again after content is loaded } function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } document.getElementById("defaultOpen").click(); 

 body { font-family: Arial; } .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; } .tab button:hover { background-color: #ddd; } .tab button.active { background-color: #ccc; } .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } .line1 { display: inline-block; } .size { width: 50%; } a.morelink { text-decoration: none; outline: none; } .morecontent span { display: none; } .lol { color: lime; font-weight: bold; } .loader { border: 10px solid #f3f3f3; border-radius: 50%; border-top: 10px solid #05788C; border-bottom: 10px solid #05788C; width: 120px; height: 120px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; margin: auto; margin-top: 30px; margin-bottom: 30px; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } 

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <div class="size"> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'People')" id="defaultOpen">People</button> </div> <div id="People" class="tabcontent"> <!-------------------This is my Loader---------------------> <div id="loader" class="loader"></div> <!-------------------This is my Loader---------------------> <div class="line1"> </div> </div> </div> <button type="button" onclick="updateTab()">Update Data!</button> </body> </html> 

Answer 1

missing was

loader.style.display = ' none ';

also use timeout function. use below script.

<script>
$( document ).ready(function() {
  console.log( "doc ready!" );
  var personArr = [];
  var person = {
    ["first-Name"]: "John",
    ["last-Name"]: "Doe",
    ["age"]: 21,
    ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
  };
  var person2 = {
    ["first-Name"]: "Paul",
    ["last-Name"]: "Logan",
    ["age"]: 22,
    ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
  };
  var person3 = {
    ["first-Name"]: "Sean",
    ["last-Name"]: "Kim",
    ["age"]: 32,
    ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
  };
  var person4 = {
    ["first-Name"]: "Ken",
    ["last-Name"]: "Chow",
    ["age"]: 12,
    ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
  };
  personArr.push(person, person2, person3, person4);

  var parent = document.getElementsByClassName('line1')[0];
  var frag = document.createDocumentFragment();

  personArr.forEach((person, i) => {
    var name = document.createElement('h4');
    var desc = document.createElement('p');
    var button = document.createElement('div');

    name.textContent = `${person['first-Name']} ${person['last-Name']}`;
    desc.textContent = ` ${person['person-desc']}`;
    frag.appendChild(name);
    frag.appendChild(desc);

  });
  parent.appendChild(frag);
  loader.style.display = 'none'; // This makes the loader disappear once content is loaded.




});




      function updateTab() {
        var anotherArr = [];
        var person5 = {
          ["first-Name"]: "Jun",
          ["last-Name"]: "Kim",
          ["age"]: 18,
          ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
        };
        var person6 = {
          ["first-Name"]: "Scooby",
          ["last-Name"]: "Doo",
          ["age"]: 18,
          ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
        };
        var person7 = {
          ["first-Name"]: "Seiya",
          ["last-Name"]: "Shun",
          ["age"]: 18,
          ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
        };
        var person8 = {
          ["first-Name"]: "Ikki",
          ["last-Name"]: "Hyuga",
          ["age"]: 18,
          ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
        };
        anotherArr.push(person5, person6, person7, person8);

        var parent = document.getElementsByClassName('line1')[0];
        var frag = document.createDocumentFragment();

        anotherArr.forEach((person, i) => {
          var name = document.createElement('h4');
          var desc = document.createElement('p');
          var button = document.createElement('div');
          name.className = "lol";
          name.textContent = `${person['first-Name']} ${person['last-Name']}`;
          desc.textContent = ` ${person['person-desc']}`;
          frag.appendChild(name);
          frag.appendChild(desc);

        });
        loader.style.display = 'block'; // Trying to make loader reappear 
        parent.innerHTML = "";
        parent.appendChild(frag);

            // Disappear again after content is loaded 
        setTimeout(function() {  loader.style.display = 'none'; }, 2000);

      }

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

document.getElementById("defaultOpen").click();
</script>