Skip to content

Commit dac1e92

Browse files
ThisIs-DeveloperThisIs-Developer
committed
feat: show animated shimmering loading skeleton instead of static SVG on initial modal load
1 parent 163c6bc commit dac1e92

2 files changed

Lines changed: 32 additions & 4 deletions

File tree

‎desktop-app/resources/js/script.js‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6497,7 +6497,14 @@ document.addEventListener("DOMContentLoaded", async function () {
64976497
<div style="display:flex; flex-direction:column; align-items:center; width:100%; height:100%;">
64986498
<div style="font-size:10px; font-weight:${titleWeight}; color:${titleColor}; margin-bottom:4px;">${t.title}</div>
64996499
<div class="diagram-svg-container diagram-svg-${catClass}" style="flex:1; width:100%; display:flex; align-items:center; justify-content:center; overflow:hidden;">
6500-
${t.svg}
6500+
<div class="skeleton-placeholder" style="width:90%; height:90%; border-radius:6px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; padding:10px; box-sizing:border-box;">
6501+
<div class="skeleton-text" style="width:50%; height:8px; margin:0;"></div>
6502+
<div style="display:flex; gap:8px; align-items:center; justify-content:center; width:100%; flex:1;">
6503+
<div class="skeleton-placeholder" style="width:30px; height:20px; border-radius:3px; opacity:0.7;"></div>
6504+
<div class="skeleton-placeholder" style="width:20px; height:2px; opacity:0.5;"></div>
6505+
<div class="skeleton-placeholder" style="width:30px; height:20px; border-radius:3px; opacity:0.7;"></div>
6506+
</div>
6507+
</div>
65016508
</div>
65026509
</div>
65036510
`;
@@ -6540,7 +6547,14 @@ document.addEventListener("DOMContentLoaded", async function () {
65406547
// Render bottom preview container with API image & fallback
65416548
previewContainer.innerHTML = `
65426549
<div class="diagram-svg-container diagram-svg-${catClass}" style="width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden;">
6543-
${t.svg}
6550+
<div class="skeleton-placeholder" style="width:95%; height:95%; border-radius:8px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; padding:20px; box-sizing:border-box;">
6551+
<div class="skeleton-text" style="width:40%; height:12px; margin:0;"></div>
6552+
<div style="display:flex; gap:16px; align-items:center; justify-content:center; width:100%; flex:1;">
6553+
<div class="skeleton-placeholder" style="width:60px; height:40px; border-radius:4px; opacity:0.7;"></div>
6554+
<div class="skeleton-placeholder" style="width:40px; height:2px; opacity:0.5;"></div>
6555+
<div class="skeleton-placeholder" style="width:60px; height:40px; border-radius:4px; opacity:0.7;"></div>
6556+
</div>
6557+
</div>
65446558
</div>
65456559
`;
65466560

‎script.js‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6497,7 +6497,14 @@ document.addEventListener("DOMContentLoaded", async function () {
64976497
<div style="display:flex; flex-direction:column; align-items:center; width:100%; height:100%;">
64986498
<div style="font-size:10px; font-weight:${titleWeight}; color:${titleColor}; margin-bottom:4px;">${t.title}</div>
64996499
<div class="diagram-svg-container diagram-svg-${catClass}" style="flex:1; width:100%; display:flex; align-items:center; justify-content:center; overflow:hidden;">
6500-
${t.svg}
6500+
<div class="skeleton-placeholder" style="width:90%; height:90%; border-radius:6px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; padding:10px; box-sizing:border-box;">
6501+
<div class="skeleton-text" style="width:50%; height:8px; margin:0;"></div>
6502+
<div style="display:flex; gap:8px; align-items:center; justify-content:center; width:100%; flex:1;">
6503+
<div class="skeleton-placeholder" style="width:30px; height:20px; border-radius:3px; opacity:0.7;"></div>
6504+
<div class="skeleton-placeholder" style="width:20px; height:2px; opacity:0.5;"></div>
6505+
<div class="skeleton-placeholder" style="width:30px; height:20px; border-radius:3px; opacity:0.7;"></div>
6506+
</div>
6507+
</div>
65016508
</div>
65026509
</div>
65036510
`;
@@ -6540,7 +6547,14 @@ document.addEventListener("DOMContentLoaded", async function () {
65406547
// Render bottom preview container with API image & fallback
65416548
previewContainer.innerHTML = `
65426549
<div class="diagram-svg-container diagram-svg-${catClass}" style="width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden;">
6543-
${t.svg}
6550+
<div class="skeleton-placeholder" style="width:95%; height:95%; border-radius:8px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; padding:20px; box-sizing:border-box;">
6551+
<div class="skeleton-text" style="width:40%; height:12px; margin:0;"></div>
6552+
<div style="display:flex; gap:16px; align-items:center; justify-content:center; width:100%; flex:1;">
6553+
<div class="skeleton-placeholder" style="width:60px; height:40px; border-radius:4px; opacity:0.7;"></div>
6554+
<div class="skeleton-placeholder" style="width:40px; height:2px; opacity:0.5;"></div>
6555+
<div class="skeleton-placeholder" style="width:60px; height:40px; border-radius:4px; opacity:0.7;"></div>
6556+
</div>
6557+
</div>
65446558
</div>
65456559
`;
65466560

0 commit comments

Comments
 (0)