Сброс спиннера и страницы после завершения обработки файла views.py в Django

У меня есть веб-приложение Django, в котором пользователи могут генерировать и загружать файлы Excel. Чтобы обеспечить обратную связь с пользователями во время создания файла, я реализовал анимацию спиннера с помощью HTML и JavaScript. Однако я столкнулся с проблемой остановки анимации спиннера после завершения загрузки файла.

Вот мой HTML и JavaScript код для спиннера:

<style>
.spinner-container {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-left-color: #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
</style>

<button type="submit" onclick="showSpinner()">GENERATE</button>

<div id="spinner" class="spinner-container">
    <div class="spinner"></div>
</div>

<script>
function showSpinner() {
    document.getElementById("spinner").style.display = "block";
}

function hideSpinner() {
    document.getElementById("spinner").style.display = "none";
}
</script>

А вот мой код Django views.py для загрузки файла:

from django.http import HttpResponse
import pandas as pd

def downloadFile(request):
    try:
        # Generate the Excel file
        with pd.ExcelWriter('NEW-DOWNLOAD.xlsx', engine='openpyxl') as excel_file_path:
            # Write dataframes to sheets
            dataframes = {
                'SUMMARY': data,
                'CHART': CHART
            }
            for sheet_name, df in dataframes.items():
                df.to_excel(excel_file_path, sheet_name=sheet_name, index=True)

        # Read the entire file as bytes
        with open('NEW-DOWNLOAD.xlsx', 'rb') as f:
            file_data = f.read()

        # Create an HttpResponse with the Excel file as attachment
        response = HttpResponse(file_data, content_type='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
        response['Content-Disposition'] = 'attachment; filename=NEW-DOWNLOAD.xlsx'

        return response

    except Exception as e:
        print('Error:', e)
        return None

downloaded_response = downloadFile()
if downloaded_response:
    return downloaded_response
else:
    context = {"message": "Error downloading file!"}
    return render(request, 'home.html', context)

Как изменить этот код, чтобы остановить анимацию спиннера после завершения загрузки файла? Я пробовал разные подходы, но ни один из них, похоже, не работает надежно. Любые соображения или предложения будут очень признательны. Спасибо!

Вернуться на верх