More efficient loading for combo widget

src/lib/nodes/widgets/ComfyComboNode.ts

@@ -40,13 +40,13 @@ export default class ComfyComboNode extends ComfyWidgetNode<string> {
     // Wait until the initial graph load for combo to be valid.
     firstLoad: Writable<boolean>;
     lightUp: Writable<boolean>;
-    valuesForCombo: Writable<any[] | null>; // Changed when the combo box has values.
+    valuesForCombo: Writable<any[]>; // Changed when the combo box has values.
 
     constructor(name?: string) {
         super(name, "A")
         this.firstLoad = writable(false)
         this.lightUp = writable(true)
-        this.valuesForCombo = writable(null)
+        this.valuesForCombo = writable([])
     }
 
     override onPropertyChanged(property: any, value: any) {

src/lib/widgets/ComboWidget.svelte

@@ -11,10 +11,10 @@
  export let widget: WidgetLayout | null = null;
  export let isMobile: boolean = false;
  let node: ComfyComboNode | null = null;
- let nodeValue: Writable<string> | null = null;
+ let nodeValue: Writable<string> = writable("");
  let propsChanged: Writable<number> | null = null;
  let lightUp: Writable<boolean> = writable(false);
- let valuesForCombo: Writable<any[]> | null = null;
+ let valuesForCombo: Writable<any[]> = writable([])
  let lastConfigured: any = null;
  let option: any = null;
 
@@ -132,11 +132,6 @@
 </script>
 
 <div class="wrapper comfy-combo" class:mobile={isMobile} class:updated={$lightUp}>
-    {#key $valuesForCombo}
-        {#if node !== null && nodeValue !== null}
-            {#if $valuesForCombo == null}
-                <span>Loading...</span>
-            {:else}
     <label>
         {#if widget.attrs.title !== ""}
             <BlockTitle show_label={true}>
@@ -145,14 +140,14 @@
             </BlockTitle>
         {/if}
         <Select
-                        value={$nodeValue}
+            value={$valuesForCombo.length === 0 ? "(Loading...)" : $nodeValue}
             bind:justValue={option}
             bind:hoverItemIndex
             bind:filterText
             bind:listOpen
             bind:input
             items={$valuesForCombo}
-                        disabled={isDisabled(widget)}
+            disabled={$valuesForCombo.length === 0 || isDisabled(widget)}
             clearable={false}
             showChevron={true}
             listAutoWidth={true}
@@ -200,9 +195,6 @@
             </div>
         </Select>
     </label>
-            {/if}
-        {/if}
-    {/key}
 </div>
 
 <style lang="scss">
@@ -257,6 +249,15 @@
      --item-background-hover: var(--comfy-dropdown-item-background-hover);
      --item-color-active: var(--comfy-dropdown-item-color-active);
      --item-background-active: var(--comfy-dropdown-item-background-active);
+     --disabled-color: var(--comfy-disabled-textbox-text-color);
+     --disabled-border-color: var(--comfy-disabled-textbox-border-color);
+     --disabled-background: var(--comfy-disabled-textbox-background-fill);
+ }
+
+
+ :global(.svelte-select.disabled) {
+     --input-color: var(--comfy-disabled-textbox-text-color) !important;
+     --selected-item-color: var(--comfy-disabled-textbox-text-color) !important;
  }
 
  :global(.svelte-select-list) {