My GPT results take time to return, how do you have a loading screen or loading widget to delay the results page?

Ask the community
6

My idea would be

  1. To add a webhook response at the end of your make scenario (which will lead to the right page)

  2. In the Softr form, set the option “On form submit” to “show message”. Remove all text.

  3. Insert the following code in a custom code block, below or above the form (you can reduce padding top and bottom to the minimum for this custom code block). At the end of this code, in the script part, you just need to change form1 by the name/ID of your form

Note that I made it in order to let you full control over design customization. You can play with customization inside <style> </style>

<div id="loader" style="display: none">
  <div class="spinner-container">
    <div class="spinner-border" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>
  <p class="loading-message">Data is being processed, please wait...</p>
</div>

<style>
  #loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
  }
  .spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .spinner-border {
    border: 4px solid #f5e507;
    border-top: 3px solid transparent;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
  }
  .spinner-border span {
    display: none;
  }
  .loading-message {
    font-size: 18px;
    font-weight: 500;
    color: #000000;
  }

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

<script>
  const loader = document.getElementById("loader");

  window.addEventListener("submit-form-success-form1", function () {
    loader.style.display = "block";
  });
</script>