How to overwrite app_entry in app.index_string?

Dash Python
1

I am hoping to write a new loading page for my dash app, and here is my html code that I want to add to app.index_string:

<body>
        <div id="react-entry-point">
          <div class="_dash-loading">
            <div class="circle"></div>
            <div class="circle"></div>
            </div>
        </div>
        <footer>
            {%config%}
            {%scripts%}
            {%renderer%}
        </footer>
    </body>

Instead of original Loading text I used something else. However, this keep throws InvalidIndexException error as {%app_entry%} section is not identified. I was wondering what is the write way of doing this?

2

Two options come to mind:

  1. override interpolate_index for this use case - check out https://dash.plot.ly/external-resources, the section "Option 2 - interpolate_index"

  2. trick us into ignoring our own entry point, add to index_string something like:

<!-- {%app_entry%} -->

Longer-term we should perhaps add a way to just override the _dash-loading contents - but that’s not possible right now.

3

Thanks Alex! I did not see this nice workaround…

Anyway I resorted to interpolate_index method eventually, and here is a simple example in case someone else is wondering:

def interpolate_index(self, **kwargs):
        # Inspect the arguments by printing them
        kwargs['app_entry'] = '''<div id="react-entry-point">
                                <div class="_dash-loading">
                                    <div class="circle"></div>
                                    <div class="circle"></div>
                                </div>
                                </div>'''
        return '''
        <!DOCTYPE html>
        <html>
            <head>
                <meta charset="UTF-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                <meta http-equiv="X-UA-Compatible" content="ie=edge" />
                <title>New Title</title>
                <link rel="shortcut icon" type="image/png" href="assets/favicon.png"/>
                <title>Your App</title>
                {css}
            </head>
            <body>
                {app_entry}
                {config}
                {scripts}
                {renderer}
            </body>
        </html>
        '''.format(
            css=kwargs['css'],
            app_entry=kwargs['app_entry'],
            config=kwargs['config'],
            scripts=kwargs['scripts'],
            renderer=kwargs['renderer'])
1 Like