How to overwrite app_entry in app.index_string?

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:

        <div id="react-entry-point">
          <div class="_dash-loading">
            <div class="circle"></div>
            <div class="circle"></div>

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?

Two options come to mind:

  1. override interpolate_index for this use case - check out, 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.

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>
        return '''
        <!DOCTYPE html>
                <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>
1 Like