From 948306dce8ad6354546b3f3415da6b97b35ee619 Mon Sep 17 00:00:00 2001
From: Sivert Hatteberg <sivert.hatteberg@usit.uio.no>
Date: Fri, 10 Sep 2021 21:21:28 +0200
Subject: [PATCH] Add a simple loading component and spinner animation
---
frontend/public/locales/en/common.json | 3 ++-
frontend/public/locales/nb/common.json | 3 ++-
frontend/public/locales/nn/common.json | 3 ++-
frontend/src/App.tsx | 4 +++-
.../src/components/animations/spinner.tsx | 23 ++++++++++++++++++
frontend/src/components/button/index.tsx | 12 ++++------
frontend/src/components/loading/index.tsx | 24 +++++++++++++++++++
frontend/src/index.tsx | 5 ++--
frontend/src/themes/uib.ts | 2 +-
9 files changed, 64 insertions(+), 15 deletions(-)
create mode 100644 frontend/src/components/animations/spinner.tsx
create mode 100644 frontend/src/components/loading/index.tsx
diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
index 8f683389..fdf892b0 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 daebbd7e..96be51a3 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 5ab50034..9da0352c 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 2826cb07..1cffcfbe 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 00000000..71632321
--- /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 a585ca36..d2b3635a 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 00000000..85f733d4
--- /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 38d872db..21107422 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 1ca0d8fe..fe29b1d4 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'
--
GitLab