HTML body loaded before DOM, and before loaded content

[lea]

Hello community

I have a custom code, which displays buttons that have different functions. My problem is that these buttons are displayed before the DOM, and before the softr content (which comes last).

I used this code thinking to delay their display a little bit, but it doesn’t change anything.

document.addEventListener("DOMContentLoaded", function() {
});

Does anyone have an idea for displaying the content of the HTML body at the same time as the softr fields?

THANKS

[artur]

@lea is there any specific block you would like to use to anchor towards ? e.g. after this block is loaded then show mine?

[lea]

thx @artur in my case it is a ‘List details page with 3 column view’ but I also have other block in my list-details that could work

[artur]

This is how you wait for a block to load

window.addEventListener('block-loaded-table1', () => {
	console.log('Block loaded');
});

replace table1 with your block name from settings

[lea]

Thanks @artur, it works a little better since I see this function triggering 100-300 milliseconds after the DOM is loaded.

However, the text content of the controls is still displayed a few tens or hundreds of miliseconds later. Is there no more reliable indicator?

[artur]

If you need to wait for data from airtable to be loaded to then use this

const onRecords = (e) => {
	setTimeout(() => {
		// The block finish rendering 
		// I may do some staff here.
	}, 50);
};

window.addEventListener('get-record-table1', onRecords);

[artur]

@lea did this work for you ?

[twmeric]

Dear all, sorry to interrupt, but I am curious if you are talking about the pain in my neck as well, here below are the indication.

If so, I would love to see how I can get rid of those preloaded image shown on the page before actually loading those content out.

[lea]

not really, I’m still struggling with the code a bit, my buttons are still preloaded. but I will get there! Thanks artur