Improve UI performance

frontend/src/Settings/Notifications/components.tsx

@@ -122,6 +122,8 @@ const NotificationModal: FunctionComponent<ModalProps & BaseModalProps> = ({
     [canSave, closeModal, current, update, payload]
   );
 
+  const getLabel = useCallback((v: Settings.NotificationInfo) => v.name, []);
+
   return (
     <BaseModal title="Notification" footer={footer} {...modal}>
       <Container fluid>
@@ -132,7 +134,7 @@ const NotificationModal: FunctionComponent<ModalProps & BaseModalProps> = ({
               options={options}
               value={current}
               onChange={setCurrent}
-              label={(v) => v.name}
+              label={getLabel}
             ></Selector>
           </Col>
           <Col hidden={current === null}>

frontend/src/Settings/Providers/components.tsx

@@ -234,6 +234,11 @@ export const ProviderModal: FunctionComponent = () => {
     []
   );
 
+  const getLabel = useCallback(
+    (v: ProviderInfo) => v.name ?? capitalize(v.key),
+    []
+  );
+
   return (
     <BaseModal title="Provider" footer={footer} modalKey={ModalKey}>
       <StagedChangesContext.Provider value={[staged, setChange]}>
@@ -245,7 +250,7 @@ export const ProviderModal: FunctionComponent = () => {
                 disabled={payload !== null}
                 options={options}
                 value={info}
-                label={(v) => v?.name ?? capitalize(v?.key ?? "")}
+                label={getLabel}
                 onChange={onSelect}
               ></Selector>
             </Col>

frontend/src/components/LanguageSelector.tsx

@@ -15,6 +15,10 @@ export type LanguageSelectorProps<M extends boolean> = Override<
   RemovedSelectorProps<M>
 >;
 
+function getLabel(lang: Language) {
+  return lang.name;
+}
+
 export function LanguageSelector<M extends boolean = false>(
   props: LanguageSelectorProps<M>
 ) {
@@ -33,7 +37,7 @@ export function LanguageSelector<M extends boolean = false>(
     <Selector
       placeholder="Language..."
       options={items}
-      label={(l) => l.name}
+      label={getLabel}
       {...selector}
     ></Selector>
   );