My dynamic images show old/random data before loading. How to avoid this?

I have a home page where I am calculating the date and pulling images and data to populate something on my header.

The code works as expected but before it completes, the images/titles show random content from my database before being overwritten with the expected items. This is very obvious and on the order of seconds on my system.

My items are connected to my database set in addition to the code running so I’m not sure if this is some strange race condition. At any rate, I am not clear how to avoid this interim condition.

Here’s the code I’m using and note that my items are supposedly hidden by default.

import wixData from “wix-data” ;

//next add a check for featured to filter then assign an embed source value and embed the page
// add commentary to the page this is probably better than REDISPLAYING

$w.onReady( async function () {

const today = new Date(); //This line gets todays date.
const day = today.getDate() ; //This line gets todays Number day.
const month = today.getMonth() + 1 ; //This line gets today’s Month

$w( “#dataset8” ).onReady( async () => {
$w( “#dataset8” ).setFilter(wixData.filter()
.eq( “month” , day) //This line filters the dataset by the Number day -mislabeled
.eq( “title” ,month)
.ne( “hide”,“yes” )
.ne( “featured”,“no” )
)
.then(() => {
//You can use this section to do something else after the code finishes filtering

//console.log(“Dataset is now matching todays day and month.”);
let file = $w( “#dataset8” ).getCurrentItem();
//console.log(“item”, file);
let tartan = file.tartan; //This line gets the current tartan name
let page = file.pageLink; //add condition for undefined send to no tartan page
if (!page) {
$w( ‘#button28’ ).label = “NO TARTAN YET FOR THIS DATE - COMING SOON!” ;

}

else $w( ‘#button28’ ).link =page;
//console.log("page is ", page); //get rid of the header ?? could you set and reset a variable and kill header or back to main page o rjust hide the button alternative just display and redirect ?
//$w(‘#html1’).src =page;

//console.log(“tartan name is”, tartan);
//“#text52”.label =tartan;
//$w(“#dayOfMonthLabel”).label = label; //This line labels our button
})
. catch ((err) => {
//console.log(err);
});

});

$w( “#dataset6” ).onReady( async () => {
//console.log(“month is”, month);
$w( “#dataset6” ).setFilter(wixData.filter()
.eq( “month” ,month)
.eq( “enabled”,“yes” )
)
.then(() => {
//You can use this section to do something else after the code finishes filtering

//console.log(“Dataset is now matching todays day and month.”);
let newfile = $w( “#dataset6” ).getCurrentItem();
//console.log(“item”, newfile.title);

//console.log(“tartan name is”, tartan);
#button18” .label = newfile.title;
#button18” .link = newfile.monthLink;
#button24” .label = newfile.featuredSpecial;
#button24” .link = newfile.specialLink;

})
. catch ((err) => {
//console.log(err);
});

$w( ‘#group23’ ).expand();
$w( ‘#box5’ ).expand();
$w( ‘#button28’ ).expand();
$w( ‘#gallery12’ ).expand();
$w( ‘#gallery11’ ).expand();

});
});

Here’s the site, you can definitely see the race condition.

Any ideas as to what to do about this would be appreciated. The image and title being picked up originally