Move loading to different component

2 files changed, 19 insertions, 12 deletions

diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
new file mode 100644
index 0000000..48dcdbc
--- /dev/null
+++ b/src/components/Loading.tsx
@@ -0,0 +1,17 @@
+/** @jsx jsx */
+import { jsx } from "@emotion/core";
+
+import { HashLoader } from "react-spinners";
+
+import HeaderBar from "../components/HeaderBar";
+
+function Loading() {
+    return <div>
+        <HeaderBar title={"Loading..."}/>
+        <div css={{display: "flex", justifyContent: "center"}}>
+            <HashLoader color="white"/>
+        </div>
+    </div>
+}
+
+export default Loading;
diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index a675f8e..ad746c7 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -2,26 +2,16 @@
 import { jsx } from "@emotion/core";
 import { Link } from "react-router-dom";
 
-import { HashLoader } from "react-spinners";
-
 import { useParams } from "react-router";
 import HeaderBar from "../components/HeaderBar";
 import { useEffect, useState } from "react";
 import { Form, getForm } from "../api/forms";
+import Loading from "../components/Loading";
 
 interface PathParams {
     id: string
 }
 
-function Loading() {
-    return <div>
-        <HeaderBar title={"Loading..."}/>
-        <div css={{display: "flex", justifyContent: "center"}}>
-            <HashLoader color="white"/>
-        </div>
-    </div>
-}
-
 function FormPage() {
     const { id } = useParams<PathParams>();
 
@@ -38,7 +28,7 @@ function FormPage() {
     }
 
     return <div>
-        <HeaderBar title={form.title}/>
+        <HeaderBar title={form.name}/>
         <div css={{marginLeft: "20px"}}>
             <h1>{form.description}</h1>
             <Link to="/" css={{color: "white"}}>Return home</Link>