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

Activity

1. T4rk1n commented on Feb 6, 2019

   

   T4rk1n

   on Feb 6, 2019

   Contributor

   More actions

   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 ... ?
2. alexcjohnson

   transferred this issue fromplotly/dash-rendereron May 22, 2019
3. fl4p-old commented on May 30, 2019

   

   fl4p-old

   on May 30, 2019

   More actions

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

   added

   Type: Enhancement

   on Aug 30, 2019
5. stlehmann commented on Jun 13, 2020

   

   stlehmann

   on Jun 13, 2020

   Contributor

   More actions

   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 ...'
6. stlehmann commented on Jun 13, 2020

   

   stlehmann

   on Jun 13, 2020

   Last edited by stlehmann

   Contributor

   More actions

   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.
7. chriddyp commented on Jul 28, 2020

   

   chriddyp

   on Jul 28, 2020

   MemberAuthor

   More actions

   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.

   👍React with 👍1Reacted by Luchao Qi

   ❤️React with ❤️1Reacted by Théo VINCENT
8. chriddyp

   closed this as completedon Jul 28, 2020
9. HammadTheOne

   added 2 commits that reference this issue on May 28, 2021

   Update Plotly.js to 1.52.1 (plotly#732)

   f737754

   Issue 486 - Don't scroll menu into view (plotly#732)

   1527e8c
10. HammadTheOne

    added 2 commits that reference this issue on Jul 23, 2021

    Update Plotly.js to 1.52.1 (#732)

    32331a7

    Issue 486 - Don't scroll menu into view (#732)

    5d2516d