Невозможно отобразить модал начальной загрузки на колбе

Question

Я создал веб-приложение с использованием фляги и загрузчика. В этом приложении, после ввода входных данных и нажатия кнопки «Отправить», я хочу показать результат или результат на той же странице в модале начальной загрузки. Но я не смог перенаправить его правильно.

---

app.py

@app.route("/action_distance", methods=['POST', 'GET'])
def action_distance():
    message = "Distance"
    if request.method == 'POST':
        key_1 = request.values.get("key_1")
        print("key_1 = ", key_1)
        key_2 = request.values.get("key_2")
        print("key_2 = ", key_2)
        x1, y1, z1 = get_coordinates(key_1)
        x2, y2, z2 = get_coordinates(key_2)
        object_one = Coordinates(x1, y1, z1)
        object_two = Coordinates(x2, y2, z2)
        distance = distance_math(object_one, object_two)
        distance = round(float(distance), 2)
        print("distance = ", distance)
        return render_template("distance.html",
                               msg=message,
                               distances=distance,
                               show_modal=True)

Я буквально передаю distances в html-файл. distance.html

    <form method="POST" action="/action_distance">
                <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
                <select name="key_1" class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
                    <option selected>Choose...</option>
                    {% for row in rows_1 %}
                        <option Value="{{row}}" name="key_1">{{row}}</option>
                    {% endfor %}
                </select>
                <select name="key_2" class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
                    <option selected>Choose...</option>
                    {% for row in rows_2 %}
                        <option Value="{{row}}" >{{row}}</option>
                    {% endfor %}
                </select>
            <button type="submit" class="btn btn-primary my-1">Submit</button>
        </form>
    {% if show_modal == True %}
    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
    <div class="modal-header">
    <h5 class="modal-title">Modal title</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span></button>
    </div>
    <div class="modal-body">
       <p>Modal body text goes here.</p>
    </div>
    <div class="modal-footer">
       <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
       <button type="button" class="btn btn-primary">Save changes</button>
     </div>
   </div>
  </div>
</div>
{% endif %}

Однако, после нажатия на кнопку, модальный загрузчик не появляется. Но когда я попробовал следующее:

{% if show_modal ==True %}
        <p>distance is : {{ distances }}</p>
{% endif %}

Это показывает переданное значение.