lazyload override options (#3652)

web-scrobbler · Apr 17, 2023 · ae16609 · ae16609
1 parent 3570955
commit ae16609
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 13 deletions.
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
@@ -234,6 +234,10 @@
         "message": "Toggle",
         "description": "Label of toggle button"
     },
+    "optionsLoadingConnectorOptions": {
+        "message": "Loading connector options...",
+        "description": "Loading connector options message"
+    },
 
     "learnMoreLabel": {
         "message": "Learn more",

diff --git a/src/ui/options/components/options/connector-override.tsx b/src/ui/options/components/options/connector-override.tsx
@@ -82,24 +82,66 @@ export default function ConnectorOverrideOptions() {
 						}}
 					/>
 				</li>
-				<For each={connectors}>
-					{(connector) => (
-						<ConnectorOption
-							connector={connector}
-							options={options}
-							setOptions={setOptions}
-							overrideOptions={overrideOptions}
-							setOverrideOptions={setOverrideOptions}
-							customPatternOptions={customPatternOptions}
-							setCustomPatternOptions={setCustomPatternOptions}
-						/>
-					)}
-				</For>
+
+				<ConnectorOptions
+					options={options}
+					setOptions={setOptions}
+					overrideOptions={overrideOptions}
+					setOverrideOptions={setOverrideOptions}
+					customPatternOptions={customPatternOptions}
+					setCustomPatternOptions={setCustomPatternOptions}
+				/>
 			</ul>
 		</>
 	);
 }
 
+/**
+ * Connector Override Options list
+ */
+function ConnectorOptions(props: {
+	options: Resource<Options.GlobalOptions | null>;
+	setOptions: ResourceActions<
+		Options.GlobalOptions | null | undefined,
+		unknown
+	>;
+	overrideOptions: Resource<Options.ConnectorsOverrideOptions | null>;
+	setOverrideOptions: ResourceActions<
+		Options.ConnectorsOverrideOptions | null | undefined,
+		unknown
+	>;
+	customPatternOptions: Resource<CustomPatterns | null>;
+	setCustomPatternOptions: ResourceActions<
+		CustomPatterns | null | undefined,
+		unknown
+	>;
+}) {
+	return (
+		<Show
+			when={
+				!props.options.loading &&
+				!props.overrideOptions.loading &&
+				!props.customPatternOptions.loading
+			}
+			fallback={<p>{t('optionsLoadingConnectorOptions')}</p>}
+		>
+			<For each={connectors}>
+				{(connector) => (
+					<ConnectorOption
+						connector={connector}
+						options={props.options}
+						setOptions={props.setOptions}
+						overrideOptions={props.overrideOptions}
+						setOverrideOptions={props.setOverrideOptions}
+						customPatternOptions={props.customPatternOptions}
+						setCustomPatternOptions={props.setCustomPatternOptions}
+					/>
+				)}
+			</For>
+		</Show>
+	);
+}
+
 /**
  * The connector override options for one connector
  */