Hi Mohammad,
A short delay before hCaptcha appears is mostly due to the time the browser needs to download and execute the external script from https://js.hcaptcha.com. That part you cannot completely remove, but you can minimise it and avoid loading it more times than needed.
About your 3 questions:
Is there a way to reduce this delay in Reactive Web?
You can’t remove the network latency, but you can:
Load the script only once and reuse it (so subsequent screens use the cached version).
Load it as early as possible in the application lifecycle, instead of every time the block is used.
The delay will usually be worst only on the very first load.
Should I load the script in the Layout instead of OnInitialize?
Yes, that is usually a better pattern.
Put the “add script tag if not present” logic in a common Layout or global block so it runs once for the whole app. Then, in your hCaptcha block, only call hcaptcha.render if window.hcaptcha already exists. This way you don’t keep injecting new tags on every screen.
How to load JavaScript in the head tag?
For external URLs like hCaptcha, what you are doing (creating a element and appending it to document.head) is the correct approach. OutSystems will send your page framework, and your JS adds the script into the at runtime.
For scripts that are part of your app bundle you can also add them as script resources in the module, and OutSystems will place them in the head automatically, but for third-party URLs the pattern you’re using is fine.
In short: load the script once at layout level, rely on browser cache, and just render the captcha when window.hcaptcha is ready. That should keep the delay as small as possible.