Force a time delay to record recordID for open up details page on a new tab

I am kind of struggling with some custom JS, so maybe can someone help me.
I have a form with 2 fields, which is filled out by a visitor (non-registered) user. The form is embedded.
Upon form submit, the visitor is redirected to a details page. The details page layout is TB default, which means that the URL contains the record ID.
My goal is to open up the details page in a new tab. I already have the code which forces this. The URL in this code is generated with the recordid

" TB.render(‘component_84’,function(data){
data.ele.find(‘.af-form-submit’).on(‘click’,function(){
$($(‘.form-2 .af-form-submit’)[0]).click();
window.open(‘https://www.example.com/details/{pageField.recordid}’, ‘_blank’, ‘width=500,height=500’);
});
});
"
The issue is that upon form submit, the time to generate the RecordID AND use this in the redirect rule is too short. So my aim is to let the visitor press the submit button, then show a delay gif or message (e.g. “your results are generated” for 2 seconds, give the TB system the time to record the record ID, and then redirect the user to a new tab (open tab). with the URL specified above (which contains the generated record ID).

My question is: how do I add this time delay thing?

Hi there!

Have you tried incorporating this code:

Hi @SuiteUpstairs,

Thanks for the update, this in indeed the code what I was looking for. However it seems that the message "results are being generated are also being displayed once the results are generated?? Also, the table details page then runs automatically an auto-refresh and then the message is gone?

This is the code I am using and look at the screenshot:

TB.render(‘component_6’, function(data) {
data.ele.find(‘.form-submit button’).click(function() {
$(‘body’).append(‘

The results are being generated…

’);
setTimeout(function() {
location.reload();
}, 10000);
});
});

And the CSS:
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(‘https://xxx.xxxx.xxl/images/spinner-light.gif’) 50% 50% no-repeat rgb(249, 249, 249);
display: flex;
justify-content: center;
align-items: center;
}

.loader p {
margin-top: 200px;
}

First, the first results on the details page…

Error-1

And then , the page runs an auto refresh:
Error-2

What am I missing here?