@salesforcedevs/dx-components 1.20.17-cb-plain-loading-1 → 1.20.18-redocly3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.20.17-cb-plain-loading-1",
+    "version": "1.20.18-redocly3",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/codeBlock/codeBlock.css

@@ -30,13 +30,11 @@ pre {
 }
 
 div.dx-theme-dark {
-    position: relative;
     border: var(--dx-g-dark-mode-toggle-button-border);
     border-radius: var(--dx-code-block-toolbar-border-radius, 0.3em);
 }
 
 div.dx-theme-light {
-    position: relative;
     border: var(--dx-g-light-mode-code-block-border);
     border-radius: var(--dx-code-block-toolbar-border-radius, 0.3em);
 }
@@ -132,21 +130,3 @@ pre[class*="shiki"] {
 dx-button {
     --dx-g-button-icon-color: var(--dx-g-cloud-blue-vibrant-50);
 }
-
-.code-block-loader {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: rgb(255 255 255 / 90%);
-    border-radius: 0 0 0.3em 0.3em;
-    z-index: 10;
-}
-
-.dx-theme-dark .code-block-loader {
-    background-color: rgb(0 0 0 / 90%);
-}

package/src/modules/dx/codeBlock/codeBlock.html

@@ -73,9 +73,6 @@
                 </div>
             </div>
             <div class="code-block-content" lwc:dom="manual"></div>
-            <div class="code-block-loader" if:true={showLoaderUI}>
-                <dx-spinner size="medium" variant="brand"></dx-spinner>
-            </div>
         </div>
     </template>
     <template if:false={codeBlock}>No content provided</template>

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -3,7 +3,6 @@ import { CodeBlockTheme, CodeBlockLanguage } from "typings/custom";
 import cx from "classnames";
 import { track as gtmTrack } from "dxUtils/analytics";
 import { highlightCode } from "dxUtils/shiki";
-import { normalizeBoolean } from "dxUtils/normalizers";
 
 /*
     Custom language support is handled by the Shiki wrapper module
@@ -32,8 +31,6 @@ export default class CodeBlock extends LightningElement {
     @api isEncoded = false;
 
     private _codeBlockRendered: boolean = false;
-    private _showLoadingIndicator: boolean = false;
-    private _isCbHeightCalculated: boolean = false;
     private markupLangs = ["visualforce", "html", "xml"];
     private componentLoaded: boolean = false;
     private showLanguageDropdown: boolean = false;
@@ -85,7 +82,6 @@ export default class CodeBlock extends LightningElement {
     }
     set codeBlock(value: string) {
         this._codeBlockRendered = false;
-        this._isCbHeightCalculated = false;
         let match;
         this._codeBlock = (
             (match = preTagRegexp.exec(value.trim())) === null
@@ -94,15 +90,6 @@ export default class CodeBlock extends LightningElement {
         ).trim();
     }
 
-    @api
-    get showLoadingIndicator() {
-        return this._showLoadingIndicator;
-    }
-
-    set showLoadingIndicator(value) {
-        this._showLoadingIndicator = normalizeBoolean(value);
-    }
-
     get updateThemeBtnText(): string {
         return `Switch to ${this.theme === DARK ? "Light" : "Dark"} mode`;
     }
@@ -115,66 +102,6 @@ export default class CodeBlock extends LightningElement {
         return cx(`dx-theme-${this.theme}`);
     }
 
-    get showLoaderUI(): boolean {
-        return (
-            this.showLoadingIndicator &&
-            this._isCbHeightCalculated &&
-            !this._codeBlockRendered
-        );
-    }
-
-    private calculateContainerHeight(): number | null {
-        const computedStyle = window.getComputedStyle(this.template.host);
-        const customHeight = computedStyle.getPropertyValue(
-            "--dx-code-block-height"
-        );
-
-        // If custom height is set, use it
-        if (
-            customHeight &&
-            customHeight !== "unset" &&
-            !customHeight.includes("auto")
-        ) {
-            return parseFloat(customHeight);
-        }
-
-        // If no custom height, calculate from number of lines + padding
-        if (this.codeBlock) {
-            const lines = this.codeBlock.split("\n").length;
-
-            const textSmValue =
-                parseFloat(computedStyle.getPropertyValue("--dx-g-text-sm")) ||
-                14;
-            const spacingMlgValue =
-                parseFloat(
-                    computedStyle.getPropertyValue("--dx-g-spacing-mlg")
-                ) || 20;
-
-            const codeLineHeight = spacingMlgValue;
-            const codeVerticalPadding = textSmValue * 2;
-
-            return lines * codeLineHeight + codeVerticalPadding;
-        }
-
-        return null;
-    }
-
-    private setupLoadingIndicator(): void {
-        if (!this.showLoadingIndicator) {
-            return;
-        }
-        const containerHeight = this.calculateContainerHeight();
-        if (containerHeight) {
-            const contentContainer = this.template.querySelector(
-                ".code-block-content"
-            ) as HTMLElement;
-            if (contentContainer) {
-                contentContainer.style.height = `${containerHeight}px`;
-            }
-            this._isCbHeightCalculated = true;
-        }
-    }
-
     private initializeTheme() {
         window.addEventListener(EVENT_NAME, this.toggleTheme);
         const darkModeSetting = localStorage.getItem(
@@ -192,9 +119,6 @@ export default class CodeBlock extends LightningElement {
     }
 
     async formatCodeBlock() {
-        // Show loading indicator immediately
-        this.setupLoadingIndicator();
-
         const divEl = this.template.querySelector("div.code-block-content");
         const templateEl = document.createElement("template");
 
@@ -293,7 +217,6 @@ export default class CodeBlock extends LightningElement {
                 }
             }
         }
-        this._codeBlockRendered = true;
     }
 
     onLanguageChange(newLang: any) {
@@ -381,6 +304,7 @@ export default class CodeBlock extends LightningElement {
         this.selectedLanguageLabel = this.selectedLanguage.label;
         this.selectedLanguageId = this.selectedLanguage.id;
         this.formatCodeBlock();
+        this._codeBlockRendered = true;
     }
 
     disconnectedCallback(): void {

package/src/modules/dx/tabbedCodeBlock/tabbedCodeBlock.html

@@ -9,7 +9,6 @@
                     language={codeBlockItem.language}
                     source-link={codeBlockItem.sourceLink}
                     is-encoded={codeBlockItem.isEncoded}
-                    show-loading-indicator={showLoadingIndicator}
                 ></dx-code-block>
             </dx-tab-panel>
         </template>

package/src/modules/dx/tabbedCodeBlock/tabbedCodeBlock.ts

@@ -1,24 +1,14 @@
 import { LightningElement, api } from "lwc";
 import { CodeBlockItem } from "typings/custom";
-import { safeDecodeURI, toJson, normalizeBoolean } from "dxUtils/normalizers";
+import { safeDecodeURI, toJson } from "dxUtils/normalizers";
 import { DARK } from "dx/codeBlock";
 
 export default class TabbedCodeBlock extends LightningElement {
     _codeBlocks: CodeBlockItem[] = [];
-    private _showLoadingIndicator: boolean = false;
 
     // By default, we want a dark theme for the tabbed code block; however, if the user changes the theme of any code block, it updates the same across the entire website.
     @api defaultTheme = DARK;
 
-    @api
-    get showLoadingIndicator() {
-        return this._showLoadingIndicator;
-    }
-
-    set showLoadingIndicator(value) {
-        this._showLoadingIndicator = normalizeBoolean(value);
-    }
-
     get tabs(): string {
         // Use the code block headers to create a tabs array as a JSON string
         return JSON.stringify(