PlayBridgeJS: Add progress bar for initialization steps

Author: kateinoigakukun

Examples/PlayBridgeJS/Sources/JavaScript/app.js

@@ -43,6 +43,14 @@ export class BridgeJSPlayground {
         this.copyButton = /** @type {HTMLButtonElement} */ (document.getElementById('copyButton'));
         /** @type {HTMLButtonElement} */
         this.closeShareDialogButton = /** @type {HTMLButtonElement} */ (document.getElementById('closeShareDialog'));
+
+        // Progress UI elements
+        /** @type {HTMLDivElement | null} */
+        this.progressBar = /** @type {HTMLDivElement} */ (document.getElementById('progressBar'));
+        /** @type {HTMLDivElement | null} */
+        this.progressFill = /** @type {HTMLDivElement} */ (document.getElementById('progressFill'));
+        /** @type {HTMLDivElement | null} */
+        this.progressLabel = /** @type {HTMLDivElement} */ (document.getElementById('progressLabel'));
     }
 
     /**
@@ -55,43 +63,53 @@ export class BridgeJSPlayground {
         }
 
         try {
+            this.showProgress('Starting…', 5);
             // Initialize editor system
             await this.editorSystem.init();
+            this.setProgress('Editor ready', 30);
 
             // Initialize BridgeJS
             await this.initializeBridgeJS();
+            this.setProgress('BridgeJS ready', 70);
 
             // Set up event listeners
             this.setupEventListeners();
 
             // Check for shared code in URL
+            this.setProgress('Checking shared code…', 80);
             const sharedCode = await CodeShareManager.extractCodeFromUrl();
             if (sharedCode) {
                 this.editorSystem.setInputs(sharedCode);
             } else {
                 // Load sample code
                 this.editorSystem.setInputs(sampleCode);
             }
-
+            this.setProgress('Finalizing…', 95);
             this.isInitialized = true;
             console.log('BridgeJS Playground initialized successfully');
+            this.setProgress('Ready', 100);
+            setTimeout(() => this.hideProgress(), 400);
         } catch (error) {
             console.error('Failed to initialize BridgeJS Playground:', error);
             this.showError('Failed to initialize application: ' + error.message);
+            this.hideProgress();
         }
     }
 
     // Initialize BridgeJS
     async initializeBridgeJS() {
         try {
             // Import the BridgeJS module
+            this.setProgress('Loading BridgeJS…', 50);
             const { init } = await import("../../.build/plugins/PackageToJS/outputs/Package/index.js");
             const virtualHost = await this.createTS2SkeletonFactory();
+            this.setProgress('Preparing TypeScript host…', 60);
             const { exports } = await init({
                 getImports: () => ({
                     createTS2Skeleton: () => this.createTS2Skeleton(virtualHost)
                 })
             });
+            this.setProgress('Creating runtime…', 65);
             this.playBridgeJS = new exports.PlayBridgeJS();
             console.log('BridgeJS initialized successfully');
         } catch (error) {
@@ -284,4 +302,42 @@ export class BridgeJSPlayground {
     hideError() {
         this.errorDisplay.classList.remove('show');
     }
+
+    /**
+     * Shows progress bar.
+     * @param {string} label
+     * @param {number} percent
+     */
+    showProgress(label, percent) {
+        if (this.progressBar) {
+            this.progressBar.classList.add('show');
+            this.progressBar.classList.remove('hidden');
+        }
+        this.setProgress(label, percent);
+    }
+
+    /**
+     * Updates progress label and percentage.
+     * @param {string} label
+     * @param {number} percent
+     */
+    setProgress(label, percent) {
+        if (this.progressLabel) {
+            this.progressLabel.textContent = label;
+        }
+        if (this.progressFill) {
+            const clamped = Math.max(0, Math.min(100, Number(percent) || 0));
+            this.progressFill.style.width = clamped + '%';
+        }
+    }
+
+    /**
+     * Hides progress bar.
+     */
+    hideProgress() {
+        if (this.progressBar) {
+            this.progressBar.classList.remove('show');
+            this.progressBar.classList.add('hidden');
+        }
+    }
 }

Examples/PlayBridgeJS/Sources/JavaScript/styles.css

@@ -221,6 +221,47 @@ body {
     word-break: break-word;
 }
 
+/* Progress bar */
+.progress {
+    margin: 16px auto 0 auto;
+    max-width: 640px;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.2s ease;
+}
+
+.progress.show {
+    opacity: 1;
+    visibility: visible;
+}
+
+.progress.hidden {
+    opacity: 0;
+    visibility: hidden;
+}
+
+.progress-track {
+    height: 8px;
+    background-color: var(--color-fill-tertiary);
+    border: 1px solid var(--color-border);
+    border-radius: 999px;
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    width: 0%;
+    background-color: var(--color-figure-blue);
+    transition: width 0.2s ease;
+}
+
+.progress-label {
+    margin-top: 8px;
+    text-align: center;
+    font-size: 12px;
+    color: var(--color-secondary-label);
+}
+
 .main-content {
     flex: 1;
     display: grid;

Examples/PlayBridgeJS/index.html

@@ -42,6 +42,12 @@ <h3>Share Your Code</h3>
                     </div>
                 </div>
             </div>
+            <div id="progressBar" class="progress hidden" aria-live="polite">
+                <div class="progress-track">
+                    <div id="progressFill" class="progress-fill" style="width:0%"></div>
+                </div>
+                <div id="progressLabel" class="progress-label">Initializing…</div>
+            </div>
         </header>