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

[yashbindal]

Hii Lea,
Did you figure out?

[lea]

Nop sorry

[yashbindal]

Has anyone solved this?

[manuel]

Hi there! Any updates on this? @artur how about a “no-block” page? (only custom code). How can I make sure all the content has been displayed before it’s run?

[artur]

Just to understand, do you folks want the custom code to wait until the full page is loaded and then run?

[manuel]

Well @artur , my hypothesis is that this is the reason why window.logged_in_user[‘email’] is not accurate enough when you use it within the document.addEventListener(“DOMContentLoaded”,…). Curiously, this happens in the preview from the Softr studio. And it does make you waste time investigating your code. If you use the shareable link in another browser session, it seems to work.

[artur]

@manuel

window.logged_in_user[‘email’]

Should be available on DOMContentLoaded if you still face issues pls DM me a test user to check for you