Update app.py

app.py

@@ -769,9 +769,14 @@ a {
 
 /* ══════════════ SEARCH LOADER ══════════════ */
 .search-loader {
-    display: flex; flex-direction: column; align-items: center;
-    padding: 64px 20px 56px; gap: 20px;
-    animation: fadeIn .2s ease;
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    padding: 80px 20px 72px; gap: 16px;
+    min-height: 320px;
+    animation: loaderFadeIn .3s ease;
+}
+@keyframes loaderFadeIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 .loader-spinner {
     width: 42px; height: 42px;
@@ -781,31 +786,30 @@ a {
     box-shadow: 0 0 20px -2px rgba(99,102,241,.35);
 }
 .loader-label {
-    font-size: 15px; font-weight: 500; color: #6366f1;
-    animation: loaderPulse 2s ease-in-out infinite;
+    font-size: 16px; font-weight: 600; color: #a5b4fc;
+    text-align: center;
+    letter-spacing: .02em;
 }
 .loader-query-box {
     display: inline-block;
-    margin-top: 2px;
-    padding: 6px 16px;
-    border-radius: 8px;
-    border: 1px solid rgba(99,102,241,.12);
-    background: rgba(99,102,241,.04);
-    font-size: 13px;
-    color: #52525b;
+    margin-top: 4px;
+    padding: 8px 20px;
+    border-radius: 10px;
+    border: 1px solid rgba(99,102,241,.2);
+    background: rgba(99,102,241,.06);
+    font-size: 15px;
+    color: #e0e7ff;
     letter-spacing: .01em;
+    text-align: center;
 }
 .loader-sub {
-    font-size: 13px; color: #3f3f46; max-width: 320px;
+    font-size: 13px; color: #71717a; max-width: 320px;
     text-align: center; line-height: 1.5;
 }
 .loader-elapsed {
-    font-size: 11px; color: #333338; margin-top: 4px;
-    font-variant-numeric: tabular-nums; letter-spacing: .02em;
-}
-@keyframes loaderPulse {
-    0%, 100% { opacity: .55; }
-    50% { opacity: 1; }
+    font-size: 13px; color: #818cf8; margin-top: 2px;
+    font-variant-numeric: tabular-nums; letter-spacing: .04em;
+    font-weight: 500;
 }
 .retry-btn {
     margin-top: 10px; padding: 6px 16px;
@@ -821,32 +825,32 @@ a {
 /* ══════════════ PROMINENT SEARCH LOADER ══════════════ */
 .loader-ring-wrap {
     position: relative;
-    width: 80px; height: 80px;
+    width: 88px; height: 88px;
     display: flex; align-items: center; justify-content: center;
 }
 .loader-ring {
     position: absolute;
-    width: 80px; height: 80px;
-    border: 3px solid rgba(99,102,241,.1);
-    border-top-color: #6366f1;
-    border-right-color: #4f46e5;
+    width: 88px; height: 88px;
+    border: 3px solid rgba(99,102,241,.15);
+    border-top-color: #818cf8;
+    border-right-color: #6366f1;
     border-radius: 50%;
     animation: spin .8s linear infinite;
-    box-shadow: 0 0 32px -4px rgba(99,102,241,.4), inset 0 0 20px -2px rgba(99,102,241,.15);
+    box-shadow: 0 0 40px -2px rgba(99,102,241,.5), inset 0 0 24px -2px rgba(99,102,241,.2);
 }
 .loader-ring-inner {
     position: absolute;
-    width: 56px; height: 56px;
-    border: 2px solid rgba(99,102,241,.08);
-    border-bottom-color: #818cf8;
-    border-left-color: #6366f1;
+    width: 60px; height: 60px;
+    border: 2px solid rgba(99,102,241,.1);
+    border-bottom-color: #a5b4fc;
+    border-left-color: #818cf8;
     border-radius: 50%;
     animation: spin 1.2s linear infinite reverse;
 }
 .loader-hint {
-    font-size: 12px; color: #27272a;
-    animation: loaderPulse 2.5s ease-in-out infinite;
-    letter-spacing: .03em;
+    font-size: 13px; color: #6366f1;
+    letter-spacing: .04em;
+    text-align: center;
 }
 
 /* ══════════════ RESULTS ══════════════ */
@@ -1443,41 +1447,64 @@ _HEAD_JS = """
     }
 
     /* ── auto-retry: watch status bar for "ready" then re-trigger search ── */
+    function _tryAutoSearch() {
+        if (_autoTriggered) return;
+
+        var customInput = document.getElementById('search-input');
+        var q = customInput ? (customInput.value || '').trim() : null;
+        if (!q || q.length < 3) return;
+
+        /* Don't re-trigger if results are already shown */
+        var res = document.getElementById('res');
+        if (res && res.querySelector('.card')) return;
+        if (res && res.textContent.indexOf('\\u041d\\u0456\\u0447\\u043e\\u0433\\u043e') >= 0) return;
+
+        _autoTriggered = true;
+        var observer = document.getElementById('status-bar');
+        if (observer && observer._retryObserver) { observer._retryObserver.disconnect(); }
+
+        var fields = [];
+        document.querySelectorAll('.fpill.active').forEach(function(p) {
+            fields.push(p.dataset.field);
+        });
+        if (!fields.length) fields = ['DEBTOR_NAME', 'CREDITOR_NAME'];
+        _syncFieldsToGradio(fields.join(','));
+        _updateUrl(q, fields);
+
+        enterLoading(q);
+        _triggerGradioSearch();
+    }
+
+    function _isStatusReady() {
+        var statusBar = document.getElementById('status-bar');
+        if (!statusBar) return false;
+        var text = statusBar.textContent || '';
+        return text.indexOf('\\u0437\\u0430\\u043f\\u0438\\u0441\\u0456\\u0432') >= 0;
+    }
+
     function _setupAutoRetry() {
         var statusBar = document.getElementById('status-bar');
         if (!statusBar) return;
 
+        /*
+         * CRITICAL: check current status IMMEDIATELY.
+         * If DB is already ready when we set up the observer (e.g. server was
+         * warm or demo.load already returned "ready"), no future mutation will
+         * occur and the observer would never fire. By checking now we catch
+         * the "already ready" case.
+         */
+        if (_isStatusReady()) {
+            setTimeout(_tryAutoSearch, 100);
+        }
+
         var observer = new MutationObserver(function() {
             if (_autoTriggered) { observer.disconnect(); return; }
-            var text = statusBar.textContent || '';
-            if (text.indexOf('\\u0437\\u0430\\u043f\\u0438\\u0441\\u0456\\u0432') < 0) return;
-
-            var customInput = document.getElementById('search-input');
-            var q = customInput ? (customInput.value || '').trim() : null;
-            if (!q || q.length < 3) { observer.disconnect(); return; }
-
-            /* Don't re-trigger if results are already shown */
-            var res = document.getElementById('res');
-            if (res && res.querySelector('.card')) { observer.disconnect(); return; }
-            if (res && res.textContent.indexOf('\\u041d\\u0456\\u0447\\u043e\\u0433\\u043e') >= 0) {
-                observer.disconnect(); return;
-            }
-
-            _autoTriggered = true;
-            observer.disconnect();
-
-            var fields = [];
-            document.querySelectorAll('.fpill.active').forEach(function(p) {
-                fields.push(p.dataset.field);
-            });
-            if (!fields.length) fields = ['DEBTOR_NAME', 'CREDITOR_NAME'];
-            _syncFieldsToGradio(fields.join(','));
-            _updateUrl(q, fields);
-
-            enterLoading(q);
-            _triggerGradioSearch();
+            if (!_isStatusReady()) return;
+            /* Small delay to let Gradio finish rendering the status update */
+            setTimeout(_tryAutoSearch, 200);
         });
 
+        statusBar._retryObserver = observer;
         observer.observe(statusBar, { childList: true, subtree: true, characterData: true });
         setTimeout(function() { observer.disconnect(); }, 300000);
     }