I am building my first web app using Flask. I'm new to html/ JavaScript/ CSS - please bear with me.

The app does the following: The user uploads an Excel file as follows:

<form method="POST" enctype="multipart/form-data">
  <input type="file" name="file" id="file" />

Then they select certain parameters using dropdown lists. When the user clicks "Submit", the data is manipulated using pandas and a new file is exported in Excel.

I managed to add a spinner to the "submit" button using html and CSS. I added an event listener to my JavaScript so the spinner is activated when the button is clicked. At the moment, the spinner runs indefinitely, however I would like the spinner to stop and the button text to revert to "submit" once the operation is finished, i.e. the export is complete. Does anybody know how I can accomplish this?

Here is my html:

    <button type="submit" id="submit" class="button">
        <span class="button__text">Submit</span>
    </button>

Here is my CSS:

    <style>
        .button {
          position: relative;
          padding: 8px 16px;
          background: #009579;
          border: none;
          outline: none;
          border-radius: 2px;
          cursor: pointer;
        }

        .button:active {
          background: #007a63;
        }

        .button__text {
          font: bold 20px "Quicksand", san-serif;
          color: #ffffff;
          transition: all 0.2s;
        }

        .button--loading .button__text {
          visibility: hidden;
          opacity: 0;
        }

        .button--loading::after {
          content: "";
          position: absolute;
          width: 16px;
          height: 16px;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          border: 4px solid transparent;
          border-top-color: #ffffff;
          border-radius: 50%;
          animation: button-loading-spinner 1s ease infinite;
        }

        /*animate spinner - spin from 0 to 1 turn*/
        @keyframes button-loading-spinner {
            from {
                transform: rotate(0turn);
            }

            to {
                transform: rotate(1turn);
            }

    </style>

Here is my JavaScript:

    <script type="text/javascript">
            (() => {
            const elem = document.getElementById('submit');
            elem.disabled = false;
            elem.addEventListener('click', e=> {
                elem.classList.add('button--loading');
                });
            })();
    </script>