feat: Added loading to Phase 2 (#43)

implerhq · Nov 9, 2022 · bfeb308 · bfeb308
1 parent ae8d7c4
commit bfeb308
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/apps/widget/src/components/widget/Phases/Phase2/Phase2.tsx b/apps/widget/src/components/widget/Phases/Phase2/Phase2.tsx
@@ -6,6 +6,7 @@ import { usePhase2 } from '@hooks/Phase2/usePhase2';
 import { PhasesEum } from '@types';
 import { Controller } from 'react-hook-form';
 import { MappingHeading } from './MappingHeading';
+import { LoadingOverlay } from '@ui/LoadingOverlay';
 
 interface IPhase2Props {
   onPrevClick: () => void;
@@ -17,7 +18,9 @@ export function Phase2(props: IPhase2Props) {
   const { classes } = useStyles();
   const { onPrevClick, onNextClick } = props;
   const [wrapperHeight, setWrapperHeight] = useState(defaulWrappertHeight);
-  const { headings, mappings, control, onSubmit } = usePhase2({ goNext: onNextClick });
+  const { headings, mappings, control, onSubmit, isInitialDataLoaded, isMappingFinalizing } = usePhase2({
+    goNext: onNextClick,
+  });
   const wrapperRef = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
   const titlesRef = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
 
@@ -30,6 +33,7 @@ export function Phase2(props: IPhase2Props) {
 
   return (
     <>
+      <LoadingOverlay visible={!isInitialDataLoaded || isMappingFinalizing} />
       <div style={{ flexGrow: 1 }} ref={wrapperRef}>
         {/* Heading */}
         <MappingHeading ref={titlesRef} />
@@ -61,7 +65,12 @@ export function Phase2(props: IPhase2Props) {
         </div>
       </div>
 
-      <Footer active={PhasesEum.MAPPING} onNextClick={onSubmit} onPrevClick={onPrevClick} />
+      <Footer
+        primaryButtonLoading={isMappingFinalizing}
+        active={PhasesEum.MAPPING}
+        onNextClick={onSubmit}
+        onPrevClick={onPrevClick}
+      />
     </>
   );
 }
diff --git a/apps/widget/src/hooks/Phase2/usePhase2.ts b/apps/widget/src/hooks/Phase2/usePhase2.ts
@@ -12,7 +12,11 @@ export function usePhase2({ goNext }: IUsePhase2Props) {
   const { api } = useAPIState();
   const { uploadInfo, setUploadInfo } = useAppState();
   const { control, reset, handleSubmit } = useForm<{ mappings: IMappingFinalize[] }>();
-  const { data: mappings } = useQuery<IMapping[], IErrorObject, IMapping[], string[]>(
+  const {
+    isFetched,
+    isLoading,
+    data: mappings,
+  } = useQuery<IMapping[], IErrorObject, IMapping[], string[]>(
     [`mapping:${uploadInfo._id}`],
     () => api.getMappings(uploadInfo._id),
     {
@@ -50,6 +54,7 @@ export function usePhase2({ goNext }: IUsePhase2Props) {
     mappings,
     isMappingFinalizing,
     headings: uploadInfo.headings,
+    isInitialDataLoaded: isFetched && !isLoading,
     onSubmit: handleSubmit(onFinalizeMapping),
   };
 }