Extract loading page and add padding

Author: cskrov

src/klage/klage-loader.tsx

@@ -1,13 +1,11 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { AlertStripeFeil } from 'nav-frontend-alertstriper';
-import NavFrontendSpinner from 'nav-frontend-spinner';
-import { Normaltekst } from 'nav-frontend-typografi';
 import { getKlage, updateKlage } from '../api/api';
-import { CenteredContainer } from '../styled-components/common';
 import { AppContext } from '../app-context/app-context';
 import { Klage } from './klage';
 import klageStore from './klage-store';
+import LoadingPage from '../loading-page/loading-page';
 
 interface Props {
     render: (klage: Klage) => JSX.Element;
@@ -48,12 +46,7 @@ const KlageLoader = (props: Props) => {
     }
 
     if (klage === null) {
-        return (
-            <CenteredContainer>
-                <NavFrontendSpinner type={'XL'} />
-                <Normaltekst>{status}</Normaltekst>
-            </CenteredContainer>
-        );
+        return <LoadingPage>{status}</LoadingPage>;
     }
 
     return props.render(klage);

src/loading-page/loading-page.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components/macro';
+import NavFrontendSpinner from 'nav-frontend-spinner';
+import { Normaltekst } from 'nav-frontend-typografi';
+import { CenteredContainer } from '../styled-components/common';
+
+interface Props {
+    children: string;
+}
+
+const LoadingContainer = styled(CenteredContainer)`
+    padding-top: 64px;
+    padding-bottom: 64px;
+`;
+
+const LoadingPage = ({ children }: Props) => (
+    <LoadingContainer>
+        <NavFrontendSpinner type={'XL'} />
+        <Normaltekst>{children}</Normaltekst>
+    </LoadingContainer>
+);
+
+export default LoadingPage;

src/routes/create-klage.tsx

@@ -1,16 +1,14 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { Redirect, useHistory, useLocation } from 'react-router-dom';
 import queryString from 'query-string';
-import { Normaltekst } from 'nav-frontend-typografi';
-import NavFrontendSpinner from 'nav-frontend-spinner';
 import { AlertStripeFeil } from 'nav-frontend-alertstriper';
-import { CenteredContainer } from '../styled-components/common';
 import { ensureStringIsTema } from '../tema/tema';
 import { getQueryValue } from '../query/get-query-value';
 import { createKlage } from '../api/api';
 import { AppContext } from '../app-context/app-context';
 import { getTitle } from '../query/get-title';
 import { NewKlage } from '../klage/klage';
+import LoadingPage from '../loading-page/loading-page';
 
 const CreateKlage = () => {
     const { search } = useLocation();
@@ -52,12 +50,7 @@ const CreateKlage = () => {
     }
 
     if (klage === null) {
-        return (
-            <CenteredContainer>
-                <NavFrontendSpinner type={'XL'} />
-                <Normaltekst>Oppretter klage...</Normaltekst>
-            </CenteredContainer>
-        );
+        return <LoadingPage>Oppretter klage...</LoadingPage>;
     }
 
     return <Redirect to={`/${klage.id}/begrunnelse`} />;

src/routes/landing-page.tsx

@@ -1,13 +1,11 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { Redirect } from 'react-router-dom';
 import queryString from 'query-string';
-import NavFrontendSpinner from 'nav-frontend-spinner';
 import InngangInnsendingDigital from './inngang/inngang-innsendingsvalg-digital';
 import { getUser } from '../user/get-user';
-import { CenteredContainer } from '../styled-components/common';
 import { TemaKey } from '../tema/tema';
-import { Normaltekst } from 'nav-frontend-typografi';
 import { AppContext } from '../app-context/app-context';
+import LoadingPage from '../loading-page/loading-page';
 
 const LandingPage = (temaKey: TemaKey, title: string, saksnummer: string | null = null) => {
     const { user, setUser } = useContext(AppContext);
@@ -22,12 +20,7 @@ const LandingPage = (temaKey: TemaKey, title: string, saksnummer: string | null
     }, [user, setUser]);
 
     if (loading) {
-        return (
-            <CenteredContainer>
-                <NavFrontendSpinner type={'XL'} />
-                <Normaltekst>Sjekker bruker...</Normaltekst>
-            </CenteredContainer>
-        );
+        return <LoadingPage>Sjekker bruker...</LoadingPage>;
     }
 
     if (user === null) {

src/user/user-loader.tsx

@@ -1,12 +1,11 @@
 import React, { useContext, useEffect, useState } from 'react';
-import NavFrontendSpinner from 'nav-frontend-spinner';
 import { Normaltekst } from 'nav-frontend-typografi';
 import { AlertStripeFeil } from 'nav-frontend-alertstriper';
 import { ensureAuth } from './get-user';
-import { CenteredContainer } from '../styled-components/common';
 import { AppContext } from '../app-context/app-context';
 import { LoginButton } from '../styled-components/login-button';
 import { NetworkError } from '../api/errors';
+import LoadingPage from '../loading-page/loading-page';
 
 interface Props {
     children: JSX.Element;
@@ -42,12 +41,7 @@ const UserLoader = (props: Props) => {
     }
 
     if (user === null) {
-        return (
-            <CenteredContainer>
-                <NavFrontendSpinner type={'XL'} />
-                <Normaltekst>Laster bruker...</Normaltekst>
-            </CenteredContainer>
-        );
+        return <LoadingPage>Laster bruker...</LoadingPage>;
     }
 
     return props.children;