Flask show modal after verifying WTForms validation and while queries are running

I have a Flask application that uses WTForms to grab a bunch of information from a webpage. This information is validated using some built-in validators, and also some custom validators. If the information is deemed good, my app then runs some queries on another external API which can take 15-30 seconds.

To not concern the user, I'd like to display a modal or spinner to show progress (even if there's no actual progress meter associated, just so it's not a page sitting there looking like it's loading for a bit).

I have a modal built and working just fine and I can bring it up when I click the submit button on my app (using onclick and some javascript), but the modal shows even if the WTForms data is not valid.

TL;DR is how can I have this modal still pop up after clicking submit, but only if WTForms validates the data? I've considered AJAX with another endpoint, but everything is happening within this one form submission endpoint. Here's an example of what I'm working with (some irrelevant code omitted for clarity).

@views.route('/questionnaire', methods=['GET', 'POST'])
@login_required
def questionnaire():
    project_name = None
    project_poc = None
    project_poc_email = None
    form = webforms.QuestionnaireForm()

# Get data from form.
if form.validate_on_submit():
    # Project name.
    project_name = ''
    if form.project_name != None:
        project_name = form.project_name.data

    # Project PoC.
    project_poc = ''
    if form.project_poc != None:
        project_poc = form.project_poc.data

    # Project PoC e-mail.
    project_poc_email = ''
    if form.project_poc_email != None:
        project_poc_email = form.project_poc_email.data

    # Do some really long work here with form data...
    # and while this is running I want to display the loading modal/spinner...
    # as a popup over the current page.
    # The modal should only display if validate_on_submit() is true!
    # As it stands now, it always displays when clicked, even if the form...
    # data is invalid/contains an error.

    flash('Query completed.', category='success')
    return redirect(url_for('views.questionnaire'))

flash('Query failed.', category='error')
return render_template('questionnaire.html',
    project_name=project_name, # fill with existing data so user doesn't have to re-type
    project_poc=project_poc,
    project_poc_email=project_poc_email,
    form=form
)

Here's the relevant HTML/JS:

<input class="btn btn-outline-danger btn-sm" type="submit" value="Submit" onclick="$('#loading').show();" /> 

And the modal:

<div class="modal" tabindex="-1" role="dialog" id="loading" style="display:none;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Sit tight!</h5>
            </div>
            <div class="modal-body">
                <p>We're setting things up for you.</p>
                <p>This may take a minute or two.</p>
            </div>
        </div>
    </div>
</div>

My thought would be to set a variable after the if form.validate_on_submit() line and query it after the submit button is pressed, and if it's true, then display the modal. Is this the right thinking? And how would I go about that? (I'm not new to python, but new to jquery so I don't know the limitations with this).