How to delay page display until all data has been fetched from DB?

Ask the community
,
1

Hi, I’m trying to learn (i only have very basic js knowledge) and I need your help guys. I have this page which has to display two elements from database: one image and one paragraph, based on a keyword that the user has to input. I am using the below code to run the filtering:

The issue is that the text loads a fraction faster than the image and is really annoying to the eye. I guess onReady() would be handy here, but I can’t get my head around how. Is it any way to delay the page refresh until after everything has been loaded and ready on the client side?

import wixData from "wix-data";

$w.onReady(function () {
} );

let lastBeeName

export function submit_click(event) {
    filter($w('#beeName').value);
}

function filter(beeName) {
 if (lastBeeName !== beeName){
 let newBeeName = wixData.filter();
        newBeeName = newBeeName.contains('title', beeName)
        $w('#beesCatDataset').setFilter(newBeeName);
        lastBeeName = beeName;
    }
}