title: Why loader is coming after delay?
body: <p>I have created a <code>div</code> for <strong>loader</strong> and make it <code>display: none</code> default.
  And called nested functions. At the start of the first function, I make loader <code>display: flex</code>, but it takes approx <strong>1-2 sec</strong> to show loader in Firefox and in Chrome loader is not visible.</p>
  
  <p>I am not able to understand why is this happening?</p>
  
  <pre><code>$(".image-lodaer").css({
    'display': 'flex'
  });
  
  function generateChatWindow(id, name) {
    $(".image-lodaer").css({
      'display': 'flex'
    });
    $.when(register_popup(id, name)).then(getMessages(id)).then(reloadRecentChat());
  }
  
  register_popup(id, name) {
    html appended;
  }
  
  getMessages(id) {
    get message from ajax;
    onsuccess $(".image-lodaer").css({
      'display': 'flex'
    });
  }
  
  reloadRecentChat() {
    get latest message;
  }
  </code></pre>