Speed up FidesJS initialization

[gilluminate]

Closes PROD-2082

Description Of Changes

FidesJS' initialization was depending on the DOM to complete loading. Here we change that initialization to fire off when the document is loaded and the DOM is in interactive state instead, ensuring that FidesJS is available much faster. However, in turn this creates a race condition for dynamic pages and slow loading pages between FidesJS initialization and having the page render the appropriate containers and links. That issue is addressed here as well.

Code Changes

• render fidesJS sooner by waiting for readyState to be interactive instead of complete (this is the soonest we can safely proceed with the script).
• If the modal link isn't available, set up polling to check if it gets added to the page later.
• If the embed container isn't available but fides_embed is set to true, set up polling to check if it gets added to the page later.
• Configure demo pages to be able to pass a delay to the link and container to more easily test the polling.
• Include a check for modalLinkId to see if it's an empty string rather than a real value or null. If it has and empty string, we don't look for the modal link at all. This effectively provides an "opt out" for developers who are rolling their own link using Fides.showModal();

Steps to Confirm

verify FidesJS is initializing faster

1. Update the fides-js-demo.html page in Privacy Center and uncomment these lines of code:

<!-- <h2>Huge Image</h2>
<img...
...
/> -->

2. build and start the privacy center and visit http://localhost:3000/fides-js-demo.html?geolocation=eea
3. The browser tab will keep spinning while the image loads very slowly because it's so big. This indicates that the DOM is still in an interactive state, and not complete. Previously this could have caused the overlay banner to appear after the image had fully loaded. Now the banner will appear immediately despite the slow image. Verify that this is the case.
4. revert changes to fides-js-demo.html

verify the DOM checker polling is working

1. Update the top script code in fides-js-demo.html:

• set window.render_delay = 5000; to cause the page to update with embed container and modal link after 5 seconds
• uncomment this code:

// window.fides_overrides = {
//   fides_embed: true,
// };

5. build and start the privacy center and visit http://localhost:3000/fides-js-demo.html?geolocation=us-ca
6. watch the console logs to see messages about not finding the embed ID or the modal link
7. After 5 seconds the embed and link should load, update the console that they were found, and get bound (the link is clickable to open the overlay)
8. revert changes to fides-js-demo.html

Pre-Merge Checklist

• All CI Pipelines Succeeded
• Issue Requirements are Met
• Update CHANGELOG.md

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
fides-plus-nightly	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 21, 2024 8:09pm

[cypress]

Passing run #7835 ↗︎

0	4	0	0	0
⚠️ You've recorded test results over your free plan limit. Upgrade your plan to view test results.

Details:

Merge fc537dd into 5f2d512...
Project: fides	Commit: 474fe005ad ℹ️
Status: Passed	Duration: 00:34 💡
Started: May 21, 2024 8:17 PM	Ended: May 21, 2024 8:18 PM

Review all test suite changes for PR #4896 ↗︎

[NevilleS]

This approach looks pretty good. Couple bugs and comments in here

[NevilleS]

Final hesitation...

[NevilleS]

Thanks 👍. This feels pretty good now