-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathLoading.js
More file actions
41 lines (38 loc) · 893 Bytes
/
Loading.js
File metadata and controls
41 lines (38 loc) · 893 Bytes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import spinnerPath from './images/spinner.svg';
import { useRecoilValue } from 'recoil';
import { loadingState } from './atom.js';
import styled from 'styled-components';
const Wrapper = styled.div`
display: flex;
position: absolute;
top: -50px;
flex-direction: column;
margin: 50px auto;
align-items: center;
color: #0aa1dd;
font-size: 18px;
min-width: 1500px;
width: 100%;
min-height: 2000px;
height: 100%;
z-index: 5;
background-color: ${props => props.theme.background};
`;
const Content = styled.div`
position: relative;
top: 400px;
align-items: center;
display: flex;
flex-direction: column;
`;
export default function Loading() {
const loading = useRecoilValue(loadingState);
return loading ? (
<Wrapper>
<Content>
<img src={spinnerPath} alt="Loading..." />
Loading…
</Content>
</Wrapper>
) : null;
}