Better loading in FiresMap

This commit is contained in:
vjrj 2018-05-10 11:47:45 +02:00
parent f65c1ee614
commit b7ebb9a28c
3 changed files with 7 additions and 5 deletions

View file

@ -2,6 +2,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Meteor } from 'meteor/meteor';
import { Line } from 'react-progressbar.js';
import './LoadingBar.scss';
@ -10,7 +11,7 @@ import './LoadingBar.scss';
const LoadingBar = ({ progress }) => (
<div className="loading-bar">
<Line
progress={progress}
progress={Meteor.status().status !== 'connected' ? Meteor.status().retryCount / 10 : progress}
options={{ strokeWidth: 2, color: '#5A7636' }}
initialAnimate
/>

View file

@ -10,7 +10,7 @@ import Blaze from 'meteor/gadicc:blaze-react-component';
const Reconnect = ({ t, authenticated }) => (
<div>
{ !authenticated &&
{ true && /* !authenticated && */
<Blaze
template="meteorStatus"
textDisconnect={t('Desconectado del servidor, reconectando en %delay% segundos.')}

View file

@ -197,7 +197,8 @@ class FiresMap extends React.Component {
render() {
const { t } = this.props;
console.log(`Rendering ${this.props.loading ? 'loading' : 'LOADED'}, zoom ${this.state.viewport.zoom}, map ${this.props.activefires.length + this.props.firealerts.length} of ${this.props.activefirestotal} total. False positives: ${this.props.falsePositives.length}. Reactive ${this.state.viewport.zoom >= MAXZOOMREACTIVE}`);
const loading = this.props.loading || !this.props.subsready;
console.log(`Rendering ${loading ? 'loading' : 'LOADED'}, zoom ${this.state.viewport.zoom}, map ${this.props.activefires.length + this.props.firealerts.length} of ${this.props.activefirestotal} total. False positives: ${this.props.falsePositives.length}. Reactive ${this.state.viewport.zoom >= MAXZOOMREACTIVE}`);
const title = `${t('AppName')}: ${t('Fuegos activos')}`;
if (Meteor.isDevelopment && this.props.activefires.length === 1) console.log(`Active fire: ${JSON.stringify(this.props.activefires[0])}`);
@ -263,7 +264,7 @@ class FiresMap extends React.Component {
</p>
</Col>
</Row>
{this.props.loading || !this.props.subsready ?
{loading ?
<LoadingBar progress={this.props.loading ? 0.9 : 1} />
: ''}
{/* https://github.com/CliffCloud/Leaflet.Sleep */}
@ -453,7 +454,7 @@ export default translate([], { wait: true })(withTracker(() => {
const lastFireDetected = ActiveFiresCollection.findOne({}, { sort: { when: -1 } });
return {
loading: !subscription ? true : !(subscription.ready() && settingsSubs.ready() && alertSubscription.ready()),
loading: Meteor.status().status !== 'connected' || !subscription ? true : !(subscription.ready() && settingsSubs.ready() && alertSubscription.ready()),
userSubs: userSubs ? userSubs.value : null,
userSubsBounds: userSubs ? userSubsBounds.value : null,
subsready: settingsSubs.ready(),