Smooth 15s progress bar — 0->95% linear over 15s, snap 100% on sigma render

index.html

@@ -37,43 +37,64 @@
     </div>
   </div>
   <script>
-  // Hide overlay once sigma is initialized + show progress on data fetch
+  // Smooth 15-second progress fill (0% -> 95%) with rotating Korean stage labels.
+  // Snaps to 100% and fades out when sigma renders the canvas.
   (function(){
     var s = document.getElementById('loading-status');
     var bar = document.getElementById('loading-bar');
     var overlay = document.getElementById('loading-overlay');
-    var origFetch = window.fetch;
-    var step = 0;
+    var TARGET_MS = 15000;       // fill to 95% over 15s
+    var TICK_MS   = 100;         // smooth update every 100ms
+    var FINAL_PCT = 95;          // hold at 95% if canvas not yet ready
+    var start = Date.now();
+    var done = false;
+
     var stages = [
-      'Atlas 메타데이터 로드 중…',
-      '압축된 그래프 다운로드 중…',
-      'Gzip 압축 해제 중…',
-      '노드 / 엣지 파싱 중…',
-      'Sigma.js 레이아웃 계산 중…',
-      '거의 완료…'
+      [0,    'Atlas 메타데이터 로드 중…'],
+      [2200, '압축된 그래프 다운로드 중… (3 MB gzip)'],
+      [4800, 'Gzip 압축 해제 중… (≈ 27 MB JSON)'],
+      [7800, '노드 22,482개 파싱 중…'],
+      [10800, 'Sigma.js 레이아웃 계산 중…'],
+      [13200, 'Canvas 렌더링 중…'],
     ];
-    var i = 0;
+    function updateStage(elapsed){
+      for (var k = stages.length - 1; k >= 0; k--){
+        if (elapsed >= stages[k][0]) { s.textContent = stages[k][1]; return; }
+      }
+    }
+
     var tick = setInterval(function(){
-      if (i < stages.length) { s.textContent = stages[i]; bar.style.width = ((i+1)*16) + '%'; i++; }
-    }, 1200);
-    // Watchdog: hide overlay when canvas has children (sigma rendered)
+      if (done) return;
+      var elapsed = Date.now() - start;
+      var pct = Math.min(FINAL_PCT, (elapsed / TARGET_MS) * FINAL_PCT);
+      bar.style.width = pct.toFixed(1) + '%';
+      updateStage(elapsed);
+    }, TICK_MS);
+
+    // Watchdog: when sigma canvas exists, snap to 100% and fade
     var watch = setInterval(function(){
       var canvas = document.querySelectorAll('#sigma-canvas canvas');
       if (canvas.length > 0) {
+        done = true;
         clearInterval(watch); clearInterval(tick);
-        bar.style.width = '100%'; s.textContent = '완료 ✓';
+        bar.style.width = '100%';
+        s.textContent = '완료 ✓';
         setTimeout(function(){
           overlay.style.opacity = '0';
-          setTimeout(function(){ overlay.style.display = 'none'; }, 400);
-        }, 250);
+          setTimeout(function(){ overlay.style.display = 'none'; }, 500);
+        }, 350);
       }
-    }, 250);
-    // Hard cap: hide after 30s no matter what
+    }, 200);
+
+    // Hard cap at 30s — force-hide regardless
     setTimeout(function(){
       if (overlay.style.display !== 'none') {
-        overlay.style.opacity = '0';
-        setTimeout(function(){ overlay.style.display = 'none'; }, 400);
+        done = true;
         clearInterval(watch); clearInterval(tick);
+        bar.style.width = '100%';
+        s.textContent = '완료 ✓';
+        overlay.style.opacity = '0';
+        setTimeout(function(){ overlay.style.display = 'none'; }, 500);
       }
     }, 30000);
   })();