Newbie Loading is never displayed

My dash app allows user to upload a file. The file is automatically processed . The upload and processing can take up to 90 sec. I want to let the user know that the system is working.

In my app the user makes first makes a select from a dropdown. Once they have selected an item from the drop down the file upload element is displayed.

The file processing works correctly and produce the expected results

Any idea what i am doing incorrectly?

Any idea how I can debug this?

Kind regards

Andy

                    dcc.Loading(
                            #id='loading', Loading should never have an id. 
                            type="circle",
                            fullscreen=True,
                            #children=['a string'],
                            children=[
                                    # html.Div(id="loadingOutput",
                                    #          children = [
                                                dcc.Upload(
                                                       id='selectedFileUpload',
                                                       children=html.Div([
                                                           'Drag and Drop or ',
                                                           html.A('Select Files'),
                                                       ]),
                                                       style={
                                                           'width': '300px',
                                                           'height': '60px',
                                                           'lineHeight': '60px',
                                                           'borderWidth': '1px',
                                                           'borderStyle': 'dashed',
                                                           'borderRadius': '5px',
                                                           'textAlign': 'center',
                                                           'margin': '10px'
                                                       },
                                                       # Allow multiple files to be uploaded
                                                       multiple=False
                                                 )],
                        ), # loading                     
type or paste code here

Here is my call back

@callback(
    Output(component_id='sampleCollectorStorageDict', component_property='data'),
    Output(component_id='generatedRecordingStemDiv', component_property='children'),
    Output(component_id='uploadDiv', component_property='hidden'),
    Output(component_id='errorDiv', component_property='children'),
    Output(component_id='resultsDiv', component_property='children'),

    Input(component_id="patientNameDropdown", component_property='value'),   
    Input(component_id='selectedFileUpload', component_property='contents'),
    
    
    State('selectedFileUpload', component_property='filename'),
    State('selectedFileUpload', component_property='last_modified'),
    
    State(component_id='sampleCollectorStorageDict', component_property='data')
)
def sampleCollectorControllerCallback(
                        name, 
                        base64Data, 
                        
                        selectedFileUploadFileName, 
                        selectedFileUploadTimeStamp, 
                        sampleCollectorStorageDict ):

       do stuf

       display results section
       return results children```

Hello @aedwip,

With the callback taking so long, the request normally times out after 30 seconds.

Id recommend using a background callback for this, you can also have the callback send updates throughout the different steps in the process.

Hi Jinnyzor

good suggestion. How ever I would still expect to see the “loading” to display

Kind regards

Andy

You mean the spinning because you added a file?

No, this shouldn’t cause any loading spinner because the upload element inst being altered by the callback.

Hi Jinnyzor

I think you may have found my mis understanding. I thought that Input() triggered the spinner, you are saying it is the Output() ?

If I think about using ajax, I would start the spinner when the user click the button then make the async call to the server. When I get the response I would stop it

If I understood your comment, The input triggers my callback how ever the dcc.Loading element is some “watches” the for output. Some how it must know when output has completed

I should have time try this out, and will post my results

I will also look in to the “background calls” doc you sent

Kind regards

Andy

Correct.

Once the output is no longer loading, the spinner goes away.

Dash automatically will apply some loading attributes to things that are pending receiving an output from the callback.

Utilizing a background callback will give you more flexibility. :slight_smile:

Thanks Jinnyzor

works like a charm!

Andy

1 Like