Clientside countdown component to compliment dcc.Interval

[chriddyp]

nytimes has a nice countdown badge that tells the user when the data will update:

This might be a nice built-in component that could be tied to a dcc.Interval component. It would be documented with dcc.Interval and its use would be encouraged for good UX.

API ideas:

• A dcc.Countdown component that could "target" a dcc.Interval component: `dcc.Countdown(target='interval-id', children='Checking for updates in {}')
• Or, built in to the dcc.Interval component itself: `dcc.Interval(children='Checking for updates in {}')

[alexcjohnson]

Or give dcc.Interval a prop like display to choose between default no display, text in various format (seconds, HH:MM:SS etc), or a graphical element like a ring or a progress bar. Then your use case would look like:
html.Span(['Checking for updates in ', dcc.Interval(display='M:SS')])

[bandersen23]

@chriddyp I wrote a quick example that does this using a clientside callback. It'd be nice if the countdown was global across all users, but that would be better implemented in a different way I would assume. What do you think?

import dash
from dash.dependencies import Output, Input, State
import dash_core_components as dcc
import dash_html_components as html
import datetime

app = dash.Dash()
app.layout = html.Div([
    dcc.Store(id='last-update-time'),
    dcc.Interval(id='counter', interval=20000),
    dcc.Interval(id='update-in-timer', interval=500),
    html.Span(id='status', children=None, style={'background-color': 'red', 'color':'white', 'width': '200px', 'height': '100px'})
])

@app.callback(
    Output('last-update-time', 'data'), 
    Input('main-counter', 'n_intervals')
)
def update_store(n):
    return datetime.datetime.now().timestamp()

js_counter = """
function counting_down(n, last, interval) {

    t =  Math.trunc((interval - (Date.now() - last*1000))/1000);
    
    return `Checking for updates in: ${t} seconds`
}
"""

app.clientside_callback(
    js_counter,
    Output('status', 'children'),
    Input('update-in-timer', 'n_intervals'),
    State('last-update-time', 'data'),
    State('main-counter', 'interval')
)

app.run_server()