Commit 239e97e3 authored by Alexandre Duret-Lutz's avatar Alexandre Duret-Lutz
Browse files

display a CircularProgress for long fetches

parent 8d240f92
Pipeline #3264 passed with stage
in 1 minute and 14 seconds
......@@ -2,6 +2,7 @@ import React from 'react';
import 'typeface-roboto'
import Button from '@material-ui/core/Button';
import Checkbox from '@material-ui/core/Checkbox';
import CircularProgress from '@material-ui/core/CircularProgress';
import FormControl from '@material-ui/core/FormControl';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormLabel from '@material-ui/core/FormLabel';
......@@ -47,6 +48,10 @@ const styles = theme => ({
marginRight: 0,
},
},
progress: {
display: 'block',
margin: 'auto',
},
optionstrans: {
display: 'flex',
flexWrap: 'wrap',
......@@ -240,6 +245,15 @@ function handleErrors(response) {
}
return response.json();
}
function handleErrorsAndClearTimer(timer) {
return (response) => {
clearTimeout(timer);
if (!response.ok) {
throw Error(response.status + ' ' + response.statusText);
}
return response.json();
}
}
function righthelp(contents, help) {
return (
......@@ -564,11 +578,16 @@ class LtlResult extends React.Component {
}
class LtlRewrite extends React.Component {
timer = null;
state = {
result: null,
}
componentWillUnmount() {
clearTimeout(this.timer);
}
updateResult() {
if (this.props.formula === "")
{
......@@ -590,7 +609,10 @@ class LtlRewrite extends React.Component {
if (unabbrev !== "")
url.searchParams.append("u", unabbrev);
fetch(url).then(handleErrors).then(
this.timer = setTimeout(() => {
this.setState({ result: () => <CircularProgress className={this.props.classes.progress} />})
}, 800);
fetch(url).then(handleErrorsAndClearTimer(this.timer)).then(
res => {
this.props.handleAnyParseError(res);
if ('formula' in res)
......@@ -650,10 +672,17 @@ class LtlRewrite extends React.Component {
class LtlStudy extends React.Component {
timer = null;
state = {
result: null,
}
componentWillUnmount() {
clearTimeout(this.timer);
}
buildResult(res) {
if (!('mp_class_text' in res))
return;
......@@ -734,7 +763,10 @@ class LtlStudy extends React.Component {
}
let url = new URL(api_endpoint() + 'study/' + this.props.formula);
fetch(url).then(handleErrors).then(
this.timer = setTimeout(() => {
this.setState({ result: () => <CircularProgress className={this.props.classes.progress} />})
}, 800);
fetch(url).then(handleErrorsAndClearTimer(this.timer)).then(
res => {
this.props.handleAnyParseError(res);
this.setState({ result: this.buildResult(res) });
......@@ -765,12 +797,17 @@ class LtlStudy extends React.Component {
class LtlTranslate extends React.Component {
timer = null;
state = {
result: null,
showfile: 0,
}
componentWillUnmount() {
clearTimeout(this.timer);
}
showfilehoa = () => {
console.log("showfile:", this.state.showfile)
console.log("showfile:", this.state.showfile === 1)
......@@ -828,7 +865,10 @@ class LtlTranslate extends React.Component {
if (value) url.searchParams.append("o", key);
});
fetch(url).then(handleErrors).then(
this.timer = setTimeout(() => {
this.setState({ result: () => <CircularProgress className={this.props.classes.progress} />})
}, 800);
fetch(url).then(handleErrorsAndClearTimer(this.timer)).then(
res => {
this.props.handleAnyParseError(res);
this.setState({ result: this.buildResult(res) });
......@@ -979,12 +1019,18 @@ class LtlTranslate extends React.Component {
class LtlCompare extends React.Component {
timer = null;
state = {
formula2err: null,
formula2lbt: false,
result: null,
};
componentWillUnmount() {
clearTimeout(this.timer);
}
setFormulaError2 = (val) => {
this.setState({ formula2err: val });
}
......@@ -1047,7 +1093,10 @@ class LtlCompare extends React.Component {
let url = new URL(api_endpoint() + 'compare/' + this.props.formula);
url.searchParams.append("g", this.props.formula2);
fetch(url).then(handleErrors).then(
this.timer = setTimeout(() => {
this.setState({ result: () => <CircularProgress className={this.props.classes.progress} />})
}, 800);
fetch(url).then(handleErrorsAndClearTimer(this.timer)).then(
res => {
this.handleAnyParseError(res);
this.setState({ result: this.buildResult(res) });
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment