From 2f9c8018900e1f21386de8722a32ef672748120a Mon Sep 17 00:00:00 2001 From: Felix Hamme Date: Thu, 20 Jun 2019 15:39:49 +0200 Subject: [PATCH 1/6] Add loading page --- js/components/LoadingPage.js | 23 +++++++++++++++++++++++ static/css/everypage.css | 16 ++++++++++++++++ 2 files changed, 39 insertions(+) create mode 100644 js/components/LoadingPage.js diff --git a/js/components/LoadingPage.js b/js/components/LoadingPage.js new file mode 100644 index 0000000..9fb26f6 --- /dev/null +++ b/js/components/LoadingPage.js @@ -0,0 +1,23 @@ +import Head from 'next/head'; +import {TurniereNavigation} from './Navigation'; +import {Container} from 'reactstrap'; +import {Footer} from './Footer'; +import React from 'react'; + +export function LoadingPage(props) { + return (
+ + {props.title} + + + +
+ +
+
+ {props.text} +
+ +
+
); +} diff --git a/static/css/everypage.css b/static/css/everypage.css index 5c46239..0a2c339 100644 --- a/static/css/everypage.css +++ b/static/css/everypage.css @@ -72,3 +72,19 @@ footer { background-size: cover; min-height: 100vh; } + +.loading-logo { + animation: blink .8s ease-in-out infinite; +} + +@keyframes blink { + 0% { + filter: grayscale(100%); + } + 70% { + filter: grayscale(0%); + } + 100% { + filter: grayscale(100%); + } +} From c380c2ae80e7f113b07cccb2a56afaf9eef32ec3 Mon Sep 17 00:00:00 2001 From: Felix Hamme Date: Thu, 20 Jun 2019 15:40:36 +0200 Subject: [PATCH 2/6] Use loading page for tournament page --- pages/tournament.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/pages/tournament.js b/pages/tournament.js index 341adfe..7fa6b53 100644 --- a/pages/tournament.js +++ b/pages/tournament.js @@ -12,11 +12,12 @@ import 'bootstrap/dist/css/bootstrap.min.css'; import '../static/css/everypage.css'; import '../static/css/tournament.css'; -import {getTournament} from '../js/redux/tournamentApi'; import {PlayoffStages} from '../js/components/PlayoffStages'; import GroupStage from '../js/components/GroupStage'; import {TournamentBigImage} from '../js/components/TournamentBigImage'; import {EditButton, TournamentStatusBar, TournamentStatusBarButton} from '../js/components/TournamentStatusBar'; +import {LoadingPage} from '../js/components/LoadingPage'; +import {getTournament} from '../js/redux/tournamentApi'; class PrivateTournamentPage extends React.Component { render() { @@ -71,7 +72,8 @@ class Main extends React.Component { super(props); this.state = { - tournament: null + tournament: null, + loaded: false }; this.onTournamentRequestSuccess = this.onTournamentRequestSuccess.bind(this); this.onTournamentRequestError = this.onTournamentRequestError.bind(this); @@ -82,14 +84,14 @@ class Main extends React.Component { } onTournamentRequestSuccess(requestStatus, tournament) { - this.setState({status: requestStatus, tournament: tournament}); + this.setState({status: requestStatus, tournament: tournament, loaded: true}); } onTournamentRequestError(error) { if (error.response) { - this.setState({status: error.response.status}); + this.setState({status: error.response.status, loaded: true}); } else { - this.setState({status: -1}); + this.setState({status: -1, loaded: true}); } } @@ -109,6 +111,9 @@ class Main extends React.Component {