From 71423d2029c2c5c845b1e3db3800d0755033b5b9 Mon Sep 17 00:00:00 2001
From: LASER-Yi <ly0007@yeah.net>
Date: Wed, 21 Apr 2021 23:14:54 +0800
Subject: [PATCH] Improve UI performance

---
 frontend/src/Settings/Notifications/components.tsx | 4 +++-
 frontend/src/Settings/Providers/components.tsx     | 7 ++++++-
 frontend/src/components/LanguageSelector.tsx       | 6 +++++-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/frontend/src/Settings/Notifications/components.tsx b/frontend/src/Settings/Notifications/components.tsx
index 587ffdb24..9a71a991b 100644
--- a/frontend/src/Settings/Notifications/components.tsx
+++ b/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}>
diff --git a/frontend/src/Settings/Providers/components.tsx b/frontend/src/Settings/Providers/components.tsx
index 836505a29..d740ec50a 100644
--- a/frontend/src/Settings/Providers/components.tsx
+++ b/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>
diff --git a/frontend/src/components/LanguageSelector.tsx b/frontend/src/components/LanguageSelector.tsx
index 1ae3db33d..1e17d7d90 100644
--- a/frontend/src/components/LanguageSelector.tsx
+++ b/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>
   );