# Stop loading the layout in the middle of dcc.loading and load a new layout

**URL:** <https://community.plotly.com/t/stop-loading-the-layout-in-the-middle-of-dcc-loading-and-load-a-new-layout/31381>\
**Category:** Dash Python\
**Created:** [November 15, 2019, 3:43pm UTC](https://community.plotly.com/t/stop-loading-the-layout-in-the-middle-of-dcc-loading-and-load-a-new-layout/31381 "2019-11-15T15:43:16Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![anirudhmuhnot](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@anirudhmuhnot](https://community.plotly.com/u/anirudhmuhnot)\
**Post date:** [November 15, 2019, 3:43pm UTC](https://community.plotly.com/t/stop-loading-the-layout-in-the-middle-of-dcc-loading-and-load-a-new-layout/31381/1 "2019-11-15T15:43:16Z")

</div>

Hi,

I added a loader using dcc.Loading into my output. My navbar is on my initial page and I’m loading layouts of a multi-page app. But when I load different layouts the Loader disables my Navbar and If I click an element on the navbar while loading, it loads that page after the current page is loaded. I want to have full control over my navbar and wantt the loader to load a different link in the navbar even when it is spinning. How can I do that Thank You.

---

<div class="post-metadata">

**Author:** ![flyingcujo](https://avatars.discourse-cdn.com/v4/letter/f/e480ec/32.png) [@flyingcujo](https://community.plotly.com/u/flyingcujo)\
**Post date:** [November 15, 2019, 4:34pm UTC](https://community.plotly.com/t/stop-loading-the-layout-in-the-middle-of-dcc-loading-and-load-a-new-layout/31381/2 "2019-11-15T16:34:33Z")

</div>

You just need to have the children of your `dcc.Loader` not contain your `Navbar`.

---

<div class="post-metadata">

**Author:** ![anirudhmuhnot](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@anirudhmuhnot](https://community.plotly.com/u/anirudhmuhnot)\
**Post date:** [November 15, 2019, 7:33pm UTC](https://community.plotly.com/t/stop-loading-the-layout-in-the-middle-of-dcc-loading-and-load-a-new-layout/31381/3 "2019-11-15T19:33:03Z")

</div>

It doesn’t contain my navbar. Can you show me a tried example that works? Thanks.

---

<div class="post-metadata">

**Author:** ![flyingcujo](https://avatars.discourse-cdn.com/v4/letter/f/e480ec/32.png) [@flyingcujo](https://community.plotly.com/u/flyingcujo)\
**Post date:** [November 15, 2019, 9:50pm UTC](https://community.plotly.com/t/stop-loading-the-layout-in-the-middle-of-dcc-loading-and-load-a-new-layout/31381/4 "2019-11-15T21:50:40Z")

</div>

I took this example from Dash’s online tutorials, adding the `sleep` function to aid in visualization and wrapping `dcc.Loading` around the `page-content` div.

```python
import dash
import dash_core_components as dcc
import dash_html_components as html
from time import sleep

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash( __name__ , external_stylesheets=external_stylesheets)

app.layout = html.Div(
    [
        # represents the URL bar, doesn't render anything
        dcc.Location(id='url', refresh=False),

        # This code could be your navbar - unaffected by dcc.Loading
        dcc.Link('Navigate to "/"', href='/'),
        html.Br(),
        dcc.Link('Navigate to "/page-2"', href='/page-2'),

        # content will be rendered in this element
        dcc.Loading(
            html.Div(id='page-content')
        )
    ]
)

@app.callback(dash.dependencies.Output('page-content', 'children'),
              [dash.dependencies.Input('url', 'pathname')])
def display_page(pathname):
    sleep(3)
    return html.Div([
        html.H3('You are on page {}'.format(pathname))
    ])

if __name__ == ' __main__':
    app.run_server(debug=True)

```

---

<div class="post-metadata">

**Author:** ![anirudhmuhnot](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@anirudhmuhnot](https://community.plotly.com/u/anirudhmuhnot)\
**Post date:** [November 16, 2019, 5:17am UTC](https://community.plotly.com/t/stop-loading-the-layout-in-the-middle-of-dcc-loading-and-load-a-new-layout/31381/5 "2019-11-16T05:17:03Z")

</div>

Hi,

I ran through the above code. So, when the alternate link is clicked the current page doesn’t stop it’s processing. Nor, it processes them one after the other. It processes them concurrently.(For this reason my navbar doesn’t show the new page when clicked because page is still executing my first script). I want the current page to stop it’s processing since my dashboard is CPU intensive and Load the new page in the middle of processing when clicked in the Navbar.

**#here are the code changes I made to verify this in the terminal**

```auto
import dash
import dash_core_components as dcc
import dash_html_components as html
from time import sleep

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash( __name__ , external_stylesheets=external_stylesheets)

app.layout = html.Div(
    [
        # represents the URL bar, doesn't render anything
        dcc.Location(id='url', refresh=False),

        # This code could be your navbar - unaffected by dcc.Loading
        dcc.Link('Navigate to "/"', href='/'),
        html.Br(),
        dcc.Link('Navigate to "/page-2"', href='/page-2'),

        # content will be rendered in this element
        dcc.Loading(
            html.Div(id='page-content',children=['This is default.'])
        )
    ]
)

@app.callback(dash.dependencies.Output('page-content', 'children'),
              [dash.dependencies.Input('url', 'pathname')])
def display_page(pathname):
    sleep(1)
    for i in range(500):
        #here if other link is clicked, while the first 
        #loop is still executing, The next page is not loaded before it's completed

         #also, both loops are processed concurrently
        print(i)
    print("complete")
    return html.Div([
        html.H3('You are on page {}'.format(pathname))
    ])

if __name__ == ' __main__':
    app.run_server(debug=True)

```

---

<div class="post-metadata">

**Author:** ![anirudhmuhnot](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@anirudhmuhnot](https://community.plotly.com/u/anirudhmuhnot)\
**Post date:** [November 16, 2019, 5:26am UTC](https://community.plotly.com/t/stop-loading-the-layout-in-the-middle-of-dcc-loading-and-load-a-new-layout/31381/6 "2019-11-16T05:26:35Z")

</div>

Summary:

- If, the current page that is returned using callback takes time to load, the dcc.loading(pre-loader) does’t stop processing the current page when a new link is clicked.

Need a way to stop the current layout to be **processed** and instead, load the new layout that is clicked in the middle of loading the first.

---

<div class="post-metadata">

**Author:** ![niraekjs](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/niraekjs/32/13734_2.png) [@niraekjs](https://community.plotly.com/u/niraekjs)\
**Post date:** [January 4, 2021, 1:00pm UTC](https://community.plotly.com/t/stop-loading-the-layout-in-the-middle-of-dcc-loading-and-load-a-new-layout/31381/7 "2021-01-04T13:00:25Z")

</div>

Any solution to this? seems like an important question, I’m having this issue too. One of my links in the navbar takes a while to load, so if I click a new link on the navbar, I don’t want to wait for it to load, and instead just kill it and go to the new page. But currently, it just waits until the first thing is loaded, then switches.