simplify settings

packages/web/src/App.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
   import CommandListener from './commands/CommandListener.svelte';
   import DataGridRowHeightMeter from './datagrid/DataGridRowHeightMeter.svelte';
+  import LoadingInfo from './elements/LoadingInfo.svelte';
 
   import PluginsProvider from './plugins/PluginsProvider.svelte';
   import Screen from './Screen.svelte';
   import ErrorHandler from './utility/ErrorHandler.svelte';
+  import { useSettings } from './utility/metadataLoaders';
   import OpenTabsOnStartup from './utility/OpenTabsOnStartup.svelte';
+
+  const settings = useSettings();
 </script>
 
 <DataGridRowHeightMeter />
@@ -13,4 +17,9 @@
 <PluginsProvider />
 <CommandListener />
 <OpenTabsOnStartup />
-<Screen />
+
+{#if $settings}
+  <Screen />
+{:else}
+  <LoadingInfo message="Loading settings..." />
+{/if}

packages/web/src/datagrid/DataGrid.svelte

@@ -67,6 +67,8 @@
   import registerCommand from '../commands/registerCommand';
   import { registerMenu } from '../utility/contextMenu';
   import { useSettings } from '../utility/metadataLoaders';
+  import { getCurrentSettings } from '../stores';
+  import { getBoolSettingsValue } from '../settings/settingsTools';
 
   export let config;
   export let setConfig;
@@ -98,13 +100,7 @@
   setContext('macroValues', macroValues);
 
   let managerSize;
-  let collapsedLeftColumnStore = writable(null);
-
-  const settings = useSettings();
-
-  $: if ($collapsedLeftColumnStore == null && $settings) {
-    $collapsedLeftColumnStore = !!$settings['dataGrid.hideLeftColumn'];
-  }
+  const collapsedLeftColumnStore = writable(getBoolSettingsValue('dataGrid.hideLeftColumn', false));
 
   $: isFormView = !!(formDisplay && formDisplay.config && formDisplay.config.isFormView);
   $: isJsonView = !!config?.isJsonView;

packages/web/src/datagrid/LoadingDataGridCore.svelte

@@ -26,7 +26,6 @@
 
   const loadNextDataRef = createRef(false);
   const loadedTimeRef = createRef(null);
-  const settings = useSettings();
 
   export function resetLoadedAll() {
     isLoadedAll = false;
@@ -52,7 +51,7 @@
     const nextRows = await loadDataPage(
       $$props,
       loadedRows.length,
-      getIntSettingsValue($settings, 'dataGrid.pageSize', 100, 5, 1000)
+      getIntSettingsValue('dataGrid.pageSize', 100, 5, 1000)
     );
     if (loadedTimeRef.get() !== loadStart) {
       // new load was dispatched

packages/web/src/settings/settingsTools.ts

@@ -1,6 +1,8 @@
 import _ from 'lodash';
+import { getCurrentSettings } from '../stores';
 
-export function getIntSettingsValue(settings, name, defaultValue, min = null, max = null) {
+export function getIntSettingsValue(name, defaultValue, min = null, max = null) {
+  const settings = getCurrentSettings();
   const parsed = parseInt(settings[name]);
   if (_.isNaN(parsed)) {
     return defaultValue;
@@ -12,3 +14,10 @@ export function getIntSettingsValue(settings, name, defaultValue, min = null, ma
   }
   return defaultValue;
 }
+
+export function getBoolSettingsValue(name, defaultValue) {
+  const settings = getCurrentSettings();
+  const res = settings[name];
+  if (res == null) return defaultValue;
+  return !!res;
+}

packages/web/src/stores.ts

@@ -43,14 +43,12 @@ export const activeTab = derived([openedTabs], ([$openedTabs]) => $openedTabs.fi
 export const recentDatabases = writableWithStorage([], 'recentDatabases');
 export const commandsSettings = derived(useSettings(), (config: any) => (config || {}).commands || {});
 export const allResultsInOneTabDefault = writableWithStorage(false, 'allResultsInOneTabDefault');
-export const commandsCustomized = derived(
-  [commands, commandsSettings],
-  ([$commands, $commandsSettings]) =>
-    _.mapValues($commands, (v, k) => ({
-      // @ts-ignore
-      ...v,
-      ...$commandsSettings[k],
-    }))
+export const commandsCustomized = derived([commands, commandsSettings], ([$commands, $commandsSettings]) =>
+  _.mapValues($commands, (v, k) => ({
+    // @ts-ignore
+    ...v,
+    ...$commandsSettings[k],
+  }))
 );
 
 export const visibleToolbar = writableWithStorage(1, 'visibleToolbar');
@@ -137,3 +135,10 @@ currentDatabase.subscribe(value => {
   invalidateCommands();
 });
 export const getCurrentDatabase = () => currentDatabaseValue;
+
+let currentSettingsValue = null;
+useSettings().subscribe(value => {
+  currentSettingsValue = value;
+  invalidateCommands();
+});
+export const getCurrentSettings = () => currentSettingsValue || {};