refactor: create SubmissionLoading component

src/api/challengeSubmissionPost.js

@@ -33,6 +33,7 @@ const challengeSubmission = (
   })
     .then((resp) => resp.json())
     .then((data) => {
+      console.log(data);
       dispatch({ type: SUBMIT_ACTION.TOGGLE_SUBMISSION_LOADING });
       const processUrl = API.replace('/api', '');
       window.location.replace(`${processUrl}/open-view-progress/${data}#form`);

src/pages/Submit/Submit.js

@@ -6,12 +6,12 @@ import SubmitInput from '../../components/generic/SubmitInput';
 import Button from '../../components/generic/Button';
 import theme from '../../utils/theme';
 import challengeSubmission from '../../api/challengeSubmissionPost';
-import Loading from '../../components/generic/Loading';
 import getTags from '../../api/getTags';
 import TagsChoose from './components/TagsChoose';
 import SubmitReducer from './model/SubmitReducer';
 import SUBMIT_ACTION from './model/SubmitActionEnum';
 import SubmitStyle from './SubmitStyle';
+import SubmissionLoadingStyle from './components/SubmissionLoading/SubmissionLoadingStyle';
 
 const Submit = (props) => {
   const [state, dispatch] = React.useReducer(SubmitReducer, {
@@ -93,21 +93,7 @@ const Submit = (props) => {
       </SubmitStyle>
     );
   } else {
-    return createPortal(
+    return createPortal(<SubmissionLoadingStyle />, document.body);
-      <FlexColumn
-        position="fixed"
-        top="0"
-        left="0"
-        width="100%"
-        height="100vh"
-        zIndex="100"
-        backgroundColor={theme.colors.white}
-      >
-        <H2 as="h1">Submission processing...</H2>
-        <Loading />
-      </FlexColumn>,
-      document.body
-    );
   }
 };
 

src/pages/Submit/components/SubmissionLoading/SubmissionLoading.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Loading from '../../../../components/generic/Loading';
+import { H2 } from '../../../../utils/fonts';
+import SubmissionLoadingStyle from './SubmissionLoadingStyle';
+
+const SubmissionLoading = () => {
+  return (
+    <SubmissionLoadingStyle>
+      <H2 as="h1">Submission processing...</H2>
+      <Loading />
+    </SubmissionLoadingStyle>
+  );
+};
+
+export default SubmissionLoading;

src/pages/Submit/components/SubmissionLoading/SubmissionLoadingStyle.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { FlexColumn } from '../../../../utils/containers';
+
+const SubmissionLoadingStyle = styled(FlexColumn)`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  z-index: 100;
+  background-color: ${({ theme }) => theme.colors.white};
+`;
+
+export default SubmissionLoadingStyle;