me/parandum
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] Update page loader

Browse Source
This commit is contained in:
Matthew Grove
2021-10-03 16:43:32 +01:00
parent 6c9f617e0b
commit aec4c8efcf
1 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/App.js
View File

@@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import './css/App.css'; import './css/App.css';
import './css/PopUp.css';
import { BrowserRouter as Router, Route, Switch, Redirect, Link } from 'react-router-dom'; import { BrowserRouter as Router, Route, Switch, Redirect, Link } from 'react-router-dom';
import Home from "./Home"; import Home from "./Home";
import LoggedInHome from "./LoggedInHome"; import LoggedInHome from "./LoggedInHome";
@@ -63,13 +62,13 @@ const fadeIn = keyframes`
} }
to { to {
opacity: 0.65; opacity: 1;
} }
`; `;
const fadeOut = keyframes` const fadeOut = keyframes`
from { from {
opacity: 0.65; opacity: 1;
} }
to { to {
@@ -80,8 +79,8 @@ const fadeOut = keyframes`
const Fade = styled.div` const Fade = styled.div`
display: inline-block; display: inline-block;
visibility: ${props => props.out ? 'hidden' : 'visible'}; visibility: ${props => props.out ? 'hidden' : 'visible'};
animation: ${props => props.out ? fadeOut : fadeIn} 0.1s linear; animation: ${props => props.out ? fadeOut : fadeIn} 0.2s linear;
transition: visibility 0.1s linear; transition: visibility 0.2s linear;
`; `;
firebase.firestore().enablePersistence() firebase.firestore().enablePersistence()
@@ -351,7 +350,7 @@ class App extends React.Component {
</div> </div>
</Router> </Router>
{/* <div className="overlay"><img className="page-loader" src={Loader} alt="Loading..." /></div> */} {/* <div className="overlay"><img className="page-loader" src={Loader} alt="Loading..." /></div> */}
<Fade out={!this.state.pageLoading && this.state.userDataPresent} className="overlay overlay--black"> <Fade out={!this.state.pageLoading && this.state.userDataPresent} className="page-loader-container">
<img className="page-loader" src={Loader} alt="Loading..." /> <img className="page-loader" src={Loader} alt="Loading..." />
</Fade> </Fade>
</div> </div>