wait for server options to be ready before initializing ui

Signed-off-by: Vladimir Mandic <mandic00@live.com>

javascript/logMonitor.js

@@ -99,7 +99,8 @@ async function initLogMonitor() {
   const el = document.getElementsByTagName('footer')[0];
   if (!el) return;
   el.classList.add('log-monitor');
-  if (window.opts.ui_disabled?.includes('logs')) return;
+  const ui_disabled = Array.isArray(window.opts.ui_disabled) ? window.opts.ui_disabled : [];
+  if (ui_disabled.includes('logs')) return;
   el.innerHTML = `
     <table id="logMonitor" style="width: 100%;">
       <thead style="display: block; text-align: left; border-bottom: solid 1px var(--button-primary-border-color)">

javascript/settings.js

@@ -95,14 +95,22 @@ function markIfModified(setting_name, value) {
   // elem.scrollIntoView({ behavior: 'smooth', block: 'center' });
 }
 
-onAfterUiUpdate(async () => {
-  if (Object.keys(opts).length !== 0) return;
+function updateAllOpts() {
+  if (Object.keys(opts).length !== 0) return false;
   const json_elem = gradioApp().getElementById('settings_json');
-  if (!json_elem) return;
+  log('updateAllOpts', !!json_elem);
+  if (!json_elem) return false;
   json_elem.parentElement.style.display = 'none';
   const textarea = json_elem.querySelector('textarea');
   const jsdata = textarea.value;
   updateOpts(jsdata);
+  return true;
+}
+
+onAfterUiUpdate(async () => {
+  if (!updateAllOpts()) return;
+  const json_elem = gradioApp().getElementById('settings_json');
+  const textarea = json_elem.querySelector('textarea');
   executeCallbacks(optionsChangedCallbacks);
   registerDragDrop();
 

javascript/startup.js

@@ -2,6 +2,27 @@
 window.api = '/sdapi/v1';
 window.subpath = '';
 
+async function waitForOpts() {
+  // make sure all of the ui is ready and options are loaded
+  const t0 = performance.now();
+  let t1 = performance.now();
+  while (true) { // eslint-disable-line no-constant-condition
+    if (t1 - t0 > 120000) {
+      log('waitForOpts timeout');
+      break;
+    }
+    if (window.opts && Object.keys(window.opts).length > 0) {
+      ok = window.opts.theme_type === 'Modern' ? 'uiux_separator_appearance' in window.opts : true;
+      if (ok) {
+        log('waitForOpts', `time=${Math.round(t1 - t0)}`);
+        break;
+      }
+    }
+    await sleep(50);
+    t1 = performance.now();
+  }
+}
+
 async function initStartup() {
   const t0 = performance.now();
   log('gradio', `time=${Math.round(t0 - appStartTime)}`);
@@ -24,13 +45,8 @@ async function initStartup() {
 
   // reconnect server session
   await reconnectUI();
+  await waitForOpts();
 
-  // make sure all of the ui is ready and options are loaded
-  let t1 = performance.now();
-  while ((Object.keys(window.opts).length === 0) && (t1 - t0 < 120000)) {
-    t1 = performance.now();
-    await sleep(50);
-  }
   log('mountURL', window.opts.subpath);
   if (window.opts.subpath?.length > 0) {
     window.subpath = window.opts.subpath;