ux: implement premium symmetrical skeletons and async render performance improvements

Author: ThisIs-Developer

desktop-app/resources/index.html

@@ -858,9 +858,20 @@ <h3 class="modal-section-title">Open-source credits</h3>
         </div>
 
         <div class="content-container">
-            <div class="editor-pane">
+            <div class="editor-pane is-loading">
                 <div id="line-numbers" class="line-numbers" aria-hidden="true"></div>
                 <div id="editor-highlight-layer" class="editor-highlight-layer" aria-hidden="true"></div>
+                <div class="editor-skeleton" id="editor-skeleton" aria-hidden="true">
+                    <div class="skeleton-placeholder skeleton-title"></div>
+                    <div class="skeleton-placeholder skeleton-line skeleton-w90"></div>
+                    <div class="skeleton-placeholder skeleton-line skeleton-w85"></div>
+                    <div class="skeleton-placeholder skeleton-line skeleton-w60"></div>
+                    
+                    <div class="skeleton-placeholder skeleton-subtitle"></div>
+                    <div class="skeleton-placeholder skeleton-line skeleton-w88"></div>
+                    <div class="skeleton-placeholder skeleton-line skeleton-w92"></div>
+                    <div class="skeleton-placeholder skeleton-line skeleton-w45"></div>
+                </div>
                 <textarea id="markdown-editor" placeholder="Type or paste your Markdown here..."></textarea>
                 <div class="drop-hint" aria-hidden="true">
                     <i class="bi bi-cloud-arrow-up me-1"></i>Drop a .md file anywhere to open it
@@ -871,7 +882,20 @@ <h3 class="modal-section-title">Open-source credits</h3>
                 <div class="resize-divider-handle"></div>
             </div>
             <div class="preview-pane">
-                <div id="markdown-preview" class="markdown-body"></div>
+                <div id="markdown-preview" class="markdown-body">
+                    <!-- Initial dynamic article skeleton loader -->
+                    <div class="skeleton-preview-container" id="markdown-preview-skeleton" aria-hidden="true">
+                        <div class="skeleton-placeholder skeleton-title"></div>
+                        <div class="skeleton-placeholder skeleton-line skeleton-w90"></div>
+                        <div class="skeleton-placeholder skeleton-line skeleton-w85"></div>
+                        <div class="skeleton-placeholder skeleton-line skeleton-w60"></div>
+                        
+                        <div class="skeleton-placeholder skeleton-subtitle"></div>
+                        <div class="skeleton-placeholder skeleton-line skeleton-w88"></div>
+                        <div class="skeleton-placeholder skeleton-line skeleton-w92"></div>
+                        <div class="skeleton-placeholder skeleton-line skeleton-w45"></div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -913,5 +937,7 @@ <h3 class="modal-section-title">Open-source credits</h3>
     <script src="/js/neutralino.js"></script>
     <script src="/js/main.js"></script>
     <script src="/js/script.js"></script>
+    <!-- Screen reader dynamic accessibility announcer -->
+    <div id="app-accessibility-announcer" class="visually-hidden" aria-live="polite" aria-atomic="true"></div>
 </body>
 </html>