feat: adding loading message during fetches

cancervariants · Nov 15, 2023 · ce341ee · ce341ee
1 parent 2917cc6
commit ce341ee
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/client/src/components/Utilities/GetCoordinates/GetCoordinates.tsx b/client/src/components/Utilities/GetCoordinates/GetCoordinates.tsx
@@ -19,7 +19,6 @@ import { getGenomicCoords, getExonCoords } from "../../../services/main";
 import {
   CoordsUtilsResponse,
   GenomicData,
-  GetGeneTranscriptsResponse,
 } from "../../../services/ResponseModels";
 import StrandSwitch from "../../main/shared/StrandSwitch/StrandSwitch";
 import TabHeader from "../../main/shared/TabHeader/TabHeader";

diff --git a/client/src/components/Utilities/GetSequence/GetSequence.tsx b/client/src/components/Utilities/GetSequence/GetSequence.tsx
@@ -13,22 +13,26 @@ import HelpTooltip from "../../main/shared/HelpTooltip/HelpTooltip";
 import { HelpPopover } from "../../main/shared/HelpPopover/HelpPopover";
 import TabHeader from "../../main/shared/TabHeader/TabHeader";
 import TabPaper from "../../main/shared/TabPaper/TabPaper";
+import LoadingMessage from "../../main/shared/LoadingMessage/LoadingMessage";
 
 const GetSequenceIds: React.FC = () => {
   const [inputSequence, setInputSequence] = useState<string>("");
   const [helperText, setHelperText] = useState<string>("");
   const [refseqId, setRefseqId] = useState<string>("");
   const [ga4ghId, setGa4ghId] = useState<string>("");
   const [aliases, setAliases] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   useEffect(() => {
     if (inputSequence) {
+      setIsLoading(true);
       getSequenceIds(inputSequence).then((sequenceIdsResponse) => {
         if (sequenceIdsResponse.warnings) {
           setHelperText("Unrecognized sequence");
           setRefseqId("");
           setGa4ghId("");
           setAliases([]);
+          setIsLoading(false);
         } else {
           if (sequenceIdsResponse.refseq_id) {
             setRefseqId(sequenceIdsResponse.refseq_id);
@@ -40,6 +44,7 @@ const GetSequenceIds: React.FC = () => {
             setAliases(sequenceIdsResponse.aliases);
           }
           setHelperText("");
+          setIsLoading(false);
         }
       });
     }
@@ -184,7 +189,7 @@ const GetSequenceIds: React.FC = () => {
     </Box>
   );
 
-  const renderedIdInfo = (
+  const renderedIdInfo = isLoading ? (<LoadingMessage />) : (
     <Box className={classes.sequenceIdResult}>
       <Box className={classes.idsContainer}>
         <Box>