✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Dash interval blank layout for every refresh

Hi All,

I’m very new to Dash…!

below is my code for the layout

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash(external_stylesheets=[dbc.themes.CERULEAN])

app.layout = html.Div(
    html.Div([ html.Div(id='live-update-table'), 
        dcc.Interval(
            id='interval-component',
            interval=1*60000, # in milliseconds
            n_intervals=0
        )
    ])
)

Below is the callback

@app.callback(Output('live-update-table', 'children'),
              [Input('interval-component', 'n_intervals')])
def update_metrics(n):
    navbar = navbars()
    table1 = servstat()
    table = capperf()
    dbtble=gettblperc()
    row = html.Div(
    [
        dbc.Row( # Headings #
            [   dbc.Col([html.Img(src='assets/services.jpg', height="55px", style={'float': 'left'}),html.H4("Services",style={'color': 'green','text-align': 'center'})],width=2),
                dbc.Col([html.Img(src='assets/Performance.png', height="55px", style={'float': 'left'}),html.H4("Performance",style={'color': 'green','text-align': 'center'})],width=3),
                dbc.Col([html.Img(src='assets/Storages.png', height="55px", style={'float': 'left'}),html.H4("Storage",style={'color': 'green','text-align': 'center'})],width=3),
                dbc.Col([html.Img(src='assets/Database.png', height="55px", style={'float': 'left'}),html.H4("Database",style={'color': 'green','text-align': 'center'})],width=4),
                ],
            style={'margin': 'auto'},
            ),
        dbc.Row( # Services, Performance, Storage, Database details
            [ dbc.Col(table1, width=2),
              dbc.Col(table, width=3),
              dbc.Col(dbtble, width=3),
              ],
            style={'margin': 'auto'},
            justify="center"
            ),
        ]

    )
    return navbar, row

the issue is the layout load only after the interval i.e… after 1 mins on every refresh… I want to display the layout 1st and update the same with the interval of 1 mins. please help…