diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
index 8f68338928a0a59c3a85c437e98c98993a66e922..fdf892b074b390c1ed1116c9a9e6c5e153d8791b 100644
--- a/frontend/public/locales/en/common.json
+++ b/frontend/public/locales/en/common.json
@@ -5,5 +5,6 @@
   },
   "language": {
     "change": "Change language to {{lang}}"
-  }
+  },
+  "loading": "Loading..."
 }
diff --git a/frontend/public/locales/nb/common.json b/frontend/public/locales/nb/common.json
index daebbd7e33661298b56ab66d44c38b5f192a8c6e..96be51a3348df0f7451619613948c127d5441d10 100644
--- a/frontend/public/locales/nb/common.json
+++ b/frontend/public/locales/nb/common.json
@@ -5,5 +5,6 @@
   },
   "language": {
     "change": "Bytt språk til {{lang}}"
-  }
+  },
+  "loading": "Laster..."
 }
diff --git a/frontend/public/locales/nn/common.json b/frontend/public/locales/nn/common.json
index 5ab50034d151248c9c557760229059f69f48e67c..9da0352ce402851e72b564f51b8c909428f57937 100644
--- a/frontend/public/locales/nn/common.json
+++ b/frontend/public/locales/nn/common.json
@@ -5,5 +5,6 @@
   },
   "language": {
     "change": "Bytt språk til {{lang}}"
-  }
+  },
+  "loading": "Lastar..."
 }
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 2826cb076a9a906b28bb3136657d3a3fabc9b4a9..1cffcfbe7e46f7b7a5bc89031e73cdf21e6ce49d 100644
--- a/frontend/src/App.tsx
+++ b/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 />
diff --git a/frontend/src/components/animations/spinner.tsx b/frontend/src/components/animations/spinner.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..71632321645f416e6b7fb4b551f3047fcd35e566
--- /dev/null
+++ b/frontend/src/components/animations/spinner.tsx
@@ -0,0 +1,23 @@
+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
diff --git a/frontend/src/components/button/index.tsx b/frontend/src/components/button/index.tsx
index a585ca36cfad3bf1a20e8045f7114f403786a1c2..d2b3635acbbc66ed2dbe9427bd6fa7ebd1b5664c 100644
--- a/frontend/src/components/button/index.tsx
+++ b/frontend/src/components/button/index.tsx
@@ -1,10 +1,6 @@
-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};
 `
diff --git a/frontend/src/components/loading/index.tsx b/frontend/src/components/loading/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..85f733d45cc6ac89de056e2877a7db50e95d6955
--- /dev/null
+++ b/frontend/src/components/loading/index.tsx
@@ -0,0 +1,24 @@
+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
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 38d872db9f1fd3f29554275c2b8f272e22051003..211074226a18c38cbbb8bfa028d8f179bd7f78c8 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,19 +1,20 @@
 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>
diff --git a/frontend/src/themes/uib.ts b/frontend/src/themes/uib.ts
index 1ca0d8fe13bce57a28ae08ce4583aae7bbd8ce66..fe29b1d460cbe52137bfa91603b6e0ba3c4b9613 100644
--- a/frontend/src/themes/uib.ts
+++ b/frontend/src/themes/uib.ts
@@ -1,4 +1,4 @@
-import { DefaultTheme } from 'styled-components'
+import { DefaultTheme } from 'styled-components/macro'
 
 const white = '#FFFFFF'
 const hotPink = '#FF69B4'