Lazy load text labels (#2643)

This endpoint currently being request too often

Author: notmd

website/src/components/Messages/LabelPopup.tsx

@@ -28,7 +28,19 @@ interface ValidLabelsResponse {
 }
 
 export const LabelMessagePopup = ({ message, show, onClose }: LabelMessagePopupProps) => {
+  return (
+    <Modal isOpen={show} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <LabelMessagePopupContent onClose={onClose} message={message}></LabelMessagePopupContent>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+const LabelMessagePopupContent = ({ message, onClose }: Omit<LabelMessagePopupProps, "show">) => {
   const { t } = useTranslation();
+
   const { data: response } = useSWRImmutable<ValidLabelsResponse>(`/api/valid_labels?message_id=${message.id}`, get);
   const valid_labels = useMemo(() => response?.valid_labels ?? [], [response]);
   const [values, setValues] = useState<number[]>(new Array(valid_labels.length).fill(null));
@@ -57,30 +69,27 @@ export const LabelMessagePopup = ({ message, show, onClose }: LabelMessagePopupP
   }, [message.id, onClose, setLabels, valid_labels, values]);
 
   return (
-    <Modal isOpen={show} onClose={onClose}>
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>{t("message:label_title")}</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <LabelInputGroup
-            labels={valid_labels}
-            values={values}
-            instructions={{
-              yesNoInstruction: t("labelling:label_message_yes_no_instruction"),
-              flagInstruction: t("labelling:label_message_flag_instruction"),
-              likertInstruction: t("labelling:label_message_likert_instruction"),
-            }}
-            expectedLanguage={message.lang}
-            onChange={setValues}
-          />
-        </ModalBody>
-        <ModalFooter>
-          <Button colorScheme="blue" mr={3} onClick={submit}>
-            {t("message:submit_labels")}
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+    <>
+      <ModalHeader>{t("message:label_title")}</ModalHeader>
+      <ModalCloseButton />
+      <ModalBody>
+        <LabelInputGroup
+          labels={valid_labels}
+          values={values}
+          instructions={{
+            yesNoInstruction: t("labelling:label_message_yes_no_instruction"),
+            flagInstruction: t("labelling:label_message_flag_instruction"),
+            likertInstruction: t("labelling:label_message_likert_instruction"),
+          }}
+          expectedLanguage={message.lang}
+          onChange={setValues}
+        />
+      </ModalBody>
+      <ModalFooter>
+        <Button colorScheme="blue" mr={3} onClick={submit}>
+          {t("message:submit_labels")}
+        </Button>
+      </ModalFooter>
+    </>
   );
 };