[MWPW-159324] Progress loader circle delay handling #150

robert-bogos · 2024-11-13T13:29:36Z

Description:
This PR handles the unwanted delay in the loader circle render by moving the async loading elements outside of the function which gets triggered by clicking the "Remove background" or "Upload image" button.

Resolves: MWPW-159324

Testing instructions:
Do these for both the before and after test URLs:

open an incognito window.
go to the test url.
try clicking the "Remove background" or "Upload image" button.
Observe the delay between the click and the loader circle render.

Test URLs:
Before: https://stage--unity--adobecom.hlx.page/drafts/rbogos/remove-background
After: https://mwpw-159324-loader-delay--unity--adobecom.hlx.page/drafts/rbogos/remove-background

aem-code-sync · 2024-11-13T13:29:41Z

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

Re-run PSI checks
Re-sync branch

Commits

6febbe3 ✅ (latest)

aem-code-sync · 2024-11-13T13:30:00Z

	Page	Scores	Audits	Google
📱	/drafts/rbogos/remove-background
🖥️	/drafts/rbogos/remove-background

aishwaryamathuria · 2024-11-19T16:25:10Z

unitylibs/core/workflow/workflow-photoshop/action-binder.js

@@ -24,6 +24,26 @@ export default class ActionBinder {
    this.errorToastEl = null;
    this.psApiConfig = this.getPsApiConfig();
    this.serviceHandler = null;
+    this.loadServiceHandler();
+    this.loadSVGsMaybe();


This will add both progress circle and all the svgs (Including the ones that are present on the buttons that will be made visible only when user interacts) in the critical rendering path. Can we split this into two functions and call the progress circle js and css loader here and load svg in psActions?

Maybe I'm missing something, but this will not work because we'll still load the other SVGs when the user clicks on "Remove background".
This will still cause a delay between the button click and the 'show' action for the progress circle.