@salesforcedevs/dx-components 1.20.14-cb-loading-1 → 1.20.14-cb-plain-loading-1

package/package.json

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

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

@@ -30,11 +30,13 @@ 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);
 }
@@ -131,56 +133,20 @@ dx-button {
     --dx-g-button-icon-color: var(--dx-g-cloud-blue-vibrant-50);
 }
 
-.code-loading-skeleton {
-    padding: 14px 21px;
-    background-color: #fff;
+.code-block-loading-container {
+    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;
-    overflow: hidden;
-    height: var(--dx-code-block-height, auto);
-}
-
-.dx-theme-dark .code-loading-skeleton {
-    background-color: #000;
-}
-
-.skeleton-line {
-    height: 16px;
-    background: linear-gradient(
-        90deg,
-        var(--dx-g-gray-80) 25%,
-        var(--dx-g-gray-70) 50%,
-        var(--dx-g-gray-80) 75%
-    );
-    background-size: 200% 100%;
-    animation: skeleton-loading 1.5s infinite;
-    border-radius: 4px;
-    margin-bottom: 8px;
+    z-index: 10;
 }
 
-.dx-theme-dark .skeleton-line {
-    background: linear-gradient(
-        90deg,
-        var(--dx-g-blue-natural-30) 25%,
-        var(--dx-g-blue-natural-40) 50%,
-        var(--dx-g-blue-natural-30) 75%
-    );
-    background-size: 200% 100%;
-}
-
-.skeleton-line.short {
-    width: 60%;
-}
-
-.skeleton-line.medium {
-    width: 80%;
-}
-
-@keyframes skeleton-loading {
-    0% {
-        background-position: 200% 0;
-    }
-
-    100% {
-        background-position: -200% 0;
-    }
+.dx-theme-dark .code-block-loading-container {
+    background-color: rgb(0 0 0 / 90%);
 }

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

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

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

@@ -42,6 +42,7 @@ export default class CodeBlock extends LightningElement {
 
     private _codeBlockRendered: boolean = false;
     private _showLoadingIndicator: boolean = false;
+    private _loaderHeightSet: boolean = false;
     private markupLangs = ["visualforce", "html", "xml"];
     private componentLoaded: boolean = false;
     private showLanguageDropdown: boolean = false;
@@ -93,6 +94,7 @@ export default class CodeBlock extends LightningElement {
     }
     set codeBlock(value: string) {
         this._codeBlockRendered = false;
+        this._loaderHeightSet = false;
         let match;
         this._codeBlock = (
             (match = preTagRegexp.exec(value.trim())) === null
@@ -113,58 +115,58 @@ export default class CodeBlock extends LightningElement {
         return cx(`dx-theme-${this.theme}`);
     }
 
-    private calculateSkeletonLines(): number {
+    get showLoaderUI(): boolean {
+        return (
+            this.showLoadingIndicator &&
+            !this._codeBlockRendered &&
+            this._loaderHeightSet
+        );
+    }
+
+    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")
         ) {
-            const heightValue = parseFloat(customHeight);
-            const lineHeight = 20;
-            const verticalPadding = 28;
-            const availableHeight = heightValue - verticalPadding;
-            return Math.max(1, Math.floor(availableHeight / lineHeight));
+            return parseFloat(customHeight);
         }
 
-        return 4; // Default lines
-    }
+        // If no custom height, calculate from number of lines + padding
+        if (this.codeBlock) {
+            const lines = this.codeBlock.split("\n").length;
+            const lineHeight = 20; // px
+            const verticalPadding = 28; // 14px top + 14px bottom
+            return lines * lineHeight + verticalPadding;
+        }
 
-    private generateSkeletonHTML(lines: number): string {
-        const skeletonLines = Array.from({ length: lines }, (_, i) => {
-            const widthClass =
-                i % 3 === 0 ? "short" : i % 3 === 1 ? "medium" : "";
-            return `<div class="skeleton-line ${widthClass}"></div>`;
-        }).join("");
-
-        return `
-            <div class="code-loading-skeleton">
-                ${skeletonLines}
-            </div>
-        `;
+        return null; // No height calculation possible
     }
 
-    private showLoadingSkeleton(): void {
+    private showPlainLoader(): void {
         if (!this.showLoadingIndicator) {
             return;
         }
 
-        const codeBlockContent = this.template.querySelector(
-            ".code-block-content"
-        );
-        if (!codeBlockContent) {
-            return;
-        }
-
-        // Calculate lines and generate skeleton
-        const lines = this.calculateSkeletonLines();
-        const skeletonHTML = this.generateSkeletonHTML(lines);
+        const containerHeight = this.calculateContainerHeight();
+        if (containerHeight) {
+            // Set height on the content container for proper positioning
+            const contentContainer = this.template.querySelector(
+                ".code-block-content"
+            ) as HTMLElement;
+            if (contentContainer) {
+                contentContainer.style.height = `${containerHeight}px`;
+            }
 
-        codeBlockContent.innerHTML = skeletonHTML;
+            // Mark that loader height is set, which will show the loader
+            this._loaderHeightSet = true;
+        }
     }
 
     private initializeTheme() {
@@ -184,8 +186,8 @@ export default class CodeBlock extends LightningElement {
     }
 
     async formatCodeBlock() {
-        // Show loading skeleton immediately
-        this.showLoadingSkeleton();
+        // Show loading indicator immediately
+        this.showPlainLoader();
 
         const divEl = this.template.querySelector("div.code-block-content");
         const templateEl = document.createElement("template");
@@ -284,6 +286,8 @@ export default class CodeBlock extends LightningElement {
                     );
                 }
             }
+            // Content is now rendered, hide the loader
+            this._codeBlockRendered = true;
         }
     }
 
@@ -372,7 +376,6 @@ export default class CodeBlock extends LightningElement {
         this.selectedLanguageLabel = this.selectedLanguage.label;
         this.selectedLanguageId = this.selectedLanguage.id;
         this.formatCodeBlock();
-        this._codeBlockRendered = true;
     }
 
     disconnectedCallback(): void {