Skip to content

Ability to configure / change the loading state in the tab: "Updating..." #732

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
chriddyp opened this issue Feb 4, 2019 · 5 comments
Closed

Ability to configure / change the loading state in the tab: "Updating..." #732

chriddyp opened this issue Feb 4, 2019 · 5 comments

Comments

@chriddyp
Copy link
Member

chriddyp commented Feb 4, 2019

Right now, dash-renderer updates the page tab whenever there is a request in flight.

For fast updating callbacks, e.g. dcc.Interval, this becomes pretty annoying: https://community.plot.ly/t/how-to-avoid-updating-html-browser-title-when-using-interval-event/15379

This is one of the few "hardcoded" features in Dash that we should make configurable:

  1. We could make this a config option to turn on/ off or change the text
  2. We could remove it from dash-renderer and attempt to roll it in to loading states. However, loading states are currently configurable only per-component, not across the entire app.

Seems like (1) would be the way to go right now. It could be something like

update_page_title_during_requests = true / false / 'Loading ...'
@T4rk1n
Copy link
Contributor

T4rk1n commented Feb 6, 2019

I propose adding a config store option and adding a config value to dash, either a null value to not change the title or a string Loading .... Which should be the default null or Loading ... ?

@alexcjohnson alexcjohnson transferred this issue from plotly/dash-renderer May 22, 2019
@fl4p-old
Copy link

It would also be nice to simply have a CSS class added while loading is happening, i.e. <body class="loading">

@stlehmann
Copy link
Contributor

This would be a great improvement especially when it comes to displaying live data with small intervals (like 100ms). I would like to offer my help implementing this. Maybe someone of the core developers could give a hint where to start. I still couldn' t figure out where in the code the title is changed. I really like the idea of @chriddyp to add an attribute in the config:

Seems like (1) would be the way to go right now. It could be something like

update_page_title_during_requests = true / false / 'Loading ...'

@stlehmann
Copy link
Contributor

stlehmann commented Jun 13, 2020 •
edited
Loading

The title is set in DocumentTitle.react.js:

import {connect} from 'react-redux';
import {Component} from 'react';
import PropTypes from 'prop-types';

class DocumentTitle extends Component {
    constructor(props) {
        super(props);
        this.state = {
            initialTitle: document.title,
        };
    }

    UNSAFE_componentWillReceiveProps(props) {
        if (props.pendingCallbacks.length) {
            document.title = 'Updating...';
        } else {
            document.title = this.state.initialTitle;
        }
    }

    shouldComponentUpdate() {
        return false;
    }

    render() {
        return null;
    }
}

Changing the text brings the desired effect. I just need to figure out how to add a property in Python that can be set.

@stlehmann stlehmann mentioned this issue Jun 28, 2020
Merged
@chriddyp
Copy link
Member Author

This feature is now available in dash==1.14.0 (thanks to community member @stlehmann !) and is documented in http://dash.plotly.com/external-resources. Look for the title= and update_title=. See the "Customizing Dash's Document or Browser Tab Title", " Update the Document Title Dynamically based off of the URL or Tab", and "Customizing or Removing Dash's "Updating..." Message" sections.

@neelabalan neelabalan mentioned this issue May 13, 2021
Closed
HammadTheOne pushed a commit to HammadTheOne/dash that referenced this issue May 28, 2021
@Marc-Andre-Rivet
Update Plotly.js to 1.52.1 (plotly#732)
f737754
HammadTheOne pushed a commit to HammadTheOne/dash that referenced this issue May 28, 2021
@Marc-Andre-Rivet
Issue 486 - Don't scroll menu into view (plotly#732)
1527e8c
HammadTheOne pushed a commit that referenced this issue Jul 23, 2021
@Marc-Andre-Rivet
Update Plotly.js to 1.52.1 (#732)
32331a7
HammadTheOne pushed a commit that referenced this issue Jul 23, 2021
@Marc-Andre-Rivet
Issue 486 - Don't scroll menu into view (#732)
5d2516d
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@chriddyp @byronz @stlehmann @T4rk1n @fl4p-old