@salesforcedevs/docs-components 1.20.13-redocly2 → 1.20.13-redocly3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.20.13-redocly2",
+    "version": "1.20.13-redocly3",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/redocReference/redocReference.ts

@@ -24,10 +24,9 @@ type ReferenceConfig = {
 
 declare const Sprig: (eventType: string, eventNme: string) => void;
 const FOOTER_MARGIN_TOP = 142;
-const THROTTLE_TIMEOUT = 200;
+const DEFAULT_TIMEOUT = 200;
 const REDOC_TIMEOUT = 10000;
 const REDOC_CHECK_TIMEOUT = 100;
-const LAYOUT_TIMEOUT = 100;
 
 export default class RedocReference extends LightningElement {
     private _referenceConfig: ReferenceConfig = { refList: [] };
@@ -143,8 +142,9 @@ export default class RedocReference extends LightningElement {
         });
     };
 
-    private handleScroll = throttle(THROTTLE_TIMEOUT, () =>
-        this.adjustPosition()
+    private handleScroll = throttle(
+        DEFAULT_TIMEOUT,
+        () => !this.showServerError && !this.showError && this.adjustPosition()
     );
 
     private getDocPhaseInfo(): string | null {
@@ -184,6 +184,8 @@ export default class RedocReference extends LightningElement {
 
     private async initializeRedoc(): Promise<void> {
         try {
+            this.redocInitialized = true;
+
             await this.waitForRedoc();
             const selectedRef = this.getSelectedReference();
             if (selectedRef) {
@@ -192,17 +194,21 @@ export default class RedocReference extends LightningElement {
                 const specUrl = selectedRef.source;
                 const redocContainer = this.getRedocContainer();
                 if (specUrl && redocContainer) {
-                    this.redocInitialized = true;
-                    window.Redoc.init(
-                        specUrl,
-                        {
-                            expandResponses: "200,400"
-                        },
-                        redocContainer,
-                        () => {
-                            this.insertCustomLayoutElements();
-                        }
-                    );
+                    try {
+                        window.Redoc.init(
+                            specUrl,
+                            {
+                                expandResponses: "200,400"
+                            },
+                            redocContainer,
+                            () => {
+                                this.insertCustomLayoutElements();
+                            }
+                        );
+                    } catch (error) {
+                        this.showServerError = true;
+                        console.error("Failed to load Redoc:", error);
+                    }
                 } else {
                     this.showError = true;
                 }
@@ -237,41 +243,58 @@ export default class RedocReference extends LightningElement {
         });
     }
 
-    private insertCustomLayoutElements(): void {
-        const redocContainer = this.getRedocContainer();
-        const apiContentDiv = redocContainer?.querySelector(".api-content");
-        if (apiContentDiv) {
-            (apiContentDiv as HTMLElement).setAttribute("lwc:dom", "manual");
+    private async insertCustomLayoutElements(): Promise<void> {
+        try {
+            const redocContainer = this.getRedocContainer();
+
+            if (redocContainer) {
+                const apiContentDiv = await this.waitForApiContent(
+                    redocContainer
+                );
+                apiContentDiv.setAttribute("lwc:dom", "manual");
 
-            try {
                 const docPhaseInfo = this.getDocPhaseInfo();
                 if (docPhaseInfo) {
-                    this.insertDocPhase(
-                        apiContentDiv as HTMLElement,
-                        docPhaseInfo
-                    );
+                    this.insertDocPhase(apiContentDiv, docPhaseInfo);
                 }
 
                 if (typeof Sprig !== "undefined") {
-                    this.insertSprigSurvey(apiContentDiv as HTMLElement);
+                    this.insertSprigSurvey(apiContentDiv);
                 }
 
-                this.insertFooter(apiContentDiv as HTMLElement);
-            } catch (error) {
-                this.showServerError = true;
-                console.error(
-                    "Error showing banner and footer elements",
-                    error
-                );
+                this.insertFooter(apiContentDiv);
             }
-        } else {
-            this.layoutTimeoutId = window.setTimeout(
-                () => this.insertCustomLayoutElements(),
-                LAYOUT_TIMEOUT
-            );
+        } catch (error) {
+            this.showServerError = true;
+            console.error("Failed to insert layout elements:", error);
         }
     }
 
+    private waitForApiContent(container: HTMLElement): Promise<HTMLElement> {
+        return new Promise((resolve, reject) => {
+            const start = Date.now();
+
+            const check = () => {
+                const div =
+                    container.querySelector<HTMLElement>(".api-content");
+
+                if (div) {
+                    resolve(div);
+                    return;
+                }
+
+                if (Date.now() - start > DEFAULT_TIMEOUT) {
+                    reject(new Error("API content load timeout"));
+                    return;
+                }
+
+                setTimeout(check, DEFAULT_TIMEOUT);
+            };
+
+            check();
+        });
+    }
+
     private insertDocPhase(container: HTMLElement, docPhaseInfo: string): void {
         const docPhaseElement = createElement("doc-phase", { is: DocPhase });
         Object.assign(docPhaseElement, { docPhaseInfo });