Add a simple loading component and spinner animation

frontend/public/locales/en/common.json

@@ -5,5 +5,6 @@
   },
   "language": {
     "change": "Change language to {{lang}}"
-  }
+  },
+  "loading": "Loading..."
 }

frontend/public/locales/nb/common.json

@@ -5,5 +5,6 @@
   },
   "language": {
     "change": "Bytt språk til {{lang}}"
-  }
+  },
+  "loading": "Laster..."
 }

frontend/public/locales/nn/common.json

@@ -5,5 +5,6 @@
   },
   "language": {
     "change": "Bytt språk til {{lang}}"
-  }
+  },
+  "loading": "Lastar..."
 }

frontend/src/App.tsx

@@ -3,7 +3,8 @@ import { useTranslation } from 'react-i18next'
 
 import './App.css'
 
-import { Button } from './components/button'
+import { Button } from 'components/button'
+import Loading from 'components/loading'
 
 import { appTimezone, appVersion, appTheme } from './appConfig'
 
@@ -54,6 +55,7 @@ const App = () => {
             lang: i18n.language === 'en' ? 'Norsk' : 'Engelsk',
           })}
         </Button>
+        <Loading />
         <p>
           Version {appVersion}
           <br />

frontend/src/components/animations/spinner.tsx

+import styled from 'styled-components/macro'
+
+const Spinner = styled.div`
+  position: relative;
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-left: 0;
+  margin-right: 1rem;
+  margin-top: 0;
+  border: 3px solid rgba(200, 200, 200);
+  border-width: 3px;
+  border-radius: 50%;
+  border-top-color: rgba(50, 50, 50);
+  animation: spin 0.8s linear infinite;
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`
+
+export default Spinner

frontend/src/components/button/index.tsx

-import styled, { DefaultTheme } from 'styled-components/macro'
+import styled from 'styled-components/macro'
 
-type ButtonProps = {
-  theme: DefaultTheme
-}
-
-export const Button = styled.a<ButtonProps>`
+export const Button = styled.a`
   display: inline-block;
   border-radius: 3px;
   padding: 0.5rem 0;
@@ -14,8 +10,8 @@ export const Button = styled.a<ButtonProps>`
   color: white;
   border: 2px solid white;
   :hover {
-    background: ${(props) => props.theme.colors.secondary};
+    background: ${({ theme }) => theme.colors.secondary};
     color: black;
   }
-  background: ${(props) => props.theme.colors.main};
+  background: ${({ theme }) => theme.colors.main};
 `

frontend/src/components/loading/index.tsx

+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import Spinner from 'components/animations/spinner'
+import styled from 'styled-components/macro'
+
+const SpinnerWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+function Loading() {
+  const { t } = useTranslation(['common'])
+
+  return (
+    <SpinnerWrapper>
+      <Spinner />
+      {t('common:loading')}
+    </SpinnerWrapper>
+  )
+}
+
+export default Loading

frontend/src/index.tsx

 import React, { Suspense } from 'react'
 import ReactDOM from 'react-dom'
 import { ThemeProvider } from 'styled-components/macro'
-
 import 'i18n'
+
 import getCurrentTheme from 'theme'
 import GlobalStyle from 'globalStyles'
 import App from './App'
 import reportWebVitals from './reportWebVitals'
+import Loading from 'components/loading'
 
 function appRoot() {
   return (
     <>
       <React.StrictMode>
         <GlobalStyle />
-        <Suspense fallback="loading">
+        <Suspense fallback={<Loading />}>
           <ThemeProvider theme={getCurrentTheme()}>
             <App />
           </ThemeProvider>

frontend/src/themes/uib.ts

-import { DefaultTheme } from 'styled-components'
+import { DefaultTheme } from 'styled-components/macro'
 
 const white = '#FFFFFF'
 const hotPink = '#FF69B4'