thiagobarradas

I did this with a hack and css, putting 2 shortcodes

<style>

#loading, #events.show{
  transition: opacity 0.8s ease; 
  opacity: 1; 
}
#loading.hidden, #events {
  transition: opacity 0.8s ease; 
  opacity: 0; 
}

#upcoming-events,
#past-events, 
#past-events > div > div > div > a, 
#past-events > div > div > div > div.bit-nav-bar-container > div > div > div > a > div.bit-logo-desktop,
#past-events > div > div > div > div.bit-nav-bar-container > div > span.bit-event-list-title.bit-show-upcoming.bit-clickable,
#past-events > div > div > div > div.bit-nav-bar-container > div > div > div > a > div.bit-logo-mobile > svg,
#upcoming-events > div > div > div > div.bit-nav-bar-container > div > span.bit-event-list-title.bit-show-past.bit-clickable
{
  display: none;
}

</style>

<script type="text/javascript">            
window.onload = function() {
  setTimeout(() => {
    document.querySelector("#past-events > div > div > div > div.bit-nav-bar-container > div > span.bit-event-list-title.bit-show-past.bit-clickable").click();
    document.getElementById("past-events").style.display="block";
    document.getElementById("upcoming-events").style.display="block";
    document.getElementById("loading").classList.add("hidden");
    setTimeout(() => {
      document.getElementById("loading").style.display = "none";
      document.getElementById("events").classList.add("show");
    }, 1000);
  }, 1000);
}
</script>

<center>
<img id="loading" src="https://badrequest.band/wp-content/uploads/2023/09/loading.gif" style="width: 50px;" />
</center>

<div id="events">
<div id="upcoming-events">
[bandsintown_events artist-name="Bad Request Band" font="Kanit, sans-serif" link-color="#ED5252" language="en"]
</div>
<div id="past-events">
[bandsintown_events artist-name="Bad Request Band" font="Kanit, sans-serif" link-color="#ED5252" language="en"]
</div>
</div>