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

Using the custom form. Using make.com and airtable.com. User submits the information. Process below runs

Immediately after user submits, they get take to the results page. Which only works after the flow completes (up to 10 seconds)

Put this into custom code block in that page and it most probably will do it :slight_smile:

<style>
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #000;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
</style>
<div class="lds-ellipsis d-none loader"><div></div><div></div><div></div><div></div></div>
<script>
    if(!window.location.hash) {
        $('.loader').show();
    }
    setTimeout(function(){ 
        if(!window.location.hash) {
            window.location = window.location + '#loaded';
            window.location.reload();
        }
    }, 5000);
 </script>
1 Like

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>

Oups sorry @artur!

I actually did the same (almost) but without timeout, just on form submit success, then the webhook response would do the trick in a more dynamic way (as it can be 5 seconds as 10 or 15 seconds… we never know)

What is if(!window.location.hash) ?

1 Like

@matthieu_chateau yep good we have two options now :slight_smile:

As I put timeout and reload to avoid ending up in infinite refresh loop I added #loaded into url after the first refresh and once it’s there I stop showing loader and doing refresh

Re hash it’s part of url that starts with sharp/hash sign location.hash - Web APIs | MDN

2 Likes

Thanks, I updated my code to make it work on form submit success, according to your guidelines to listen to form events after React update, just in case.

1 Like

@ghuznee - James, did you manage to get it to work?

How would you change the code to make this work for a button? I have a list block with a button that is a web hook which redirects you to a page but it also takes 10 seconds to process. Instead of waiting 10 seconds to load and not know what is happening, I would also like to show the loading sign until the redirect happens

Really appreciate the support but if you don’t have the custom code block enabled via the 49/month then I can’t trial it.

Ouchie…I missed that the custom code block is now $49/month.

From what I gather, building apps where users would naturally expect inputs and outputs to be synced dynamically won’t be possible with Softr. At the moment, dynamic list/table blocks are an interface into Airtable where users can exchange data in an async way (as far as user experience is concerned). For the types of use cases you’re working on (@ghuznee), you’d need a list block that updates a state of a row of data as your Make workflow is running. And it does it without the need for the user to refresh the page. So I’m wondering if a better UX would be to just use Softr’s forms and deliver your GPT content by email. At least, there you get a notification (through the email client), can serve attachments (your Make/GPT workflow outputs) AND provide action buttons for the user to trigger further webhooks in Make. Thoughts?

Hey Eugene. That’s not a bad idea but I would prefer to keep the user on the site. One of the benefits of the output being received on the site itself, is that they have access all the other outputs they have received. Your way is cleaner given it’s current state, and given that it’s not possible to have a ‘loader’ without paying the 49 bucks a month it maybe the way forward. Equally it’s tricky to justify that cost in my current situation. Will have to have a think about it. Wondering as another workaround - if i could do something like get them to fill in a ‘complex’ captcha form as a means of stalling them whilst the process takes place. But I’m not having any luck having enabled captcha (with the settings filled in) and it actually showing up! (I’ve asked the question somewhere else on this forum) :slight_smile: Appreciate you taking an interest!

For form submissions what page are you directed after you submit it? I currently have the form submit direct to the home page which has a list block that then populates with the generation from openai through a Make/Integromat flow. But the user has to reload it on their own to eventually get the openai generation. How would I use the custom code snippet you created above for this scenario? Should it be put in the home page? Thanks!

Hi Hugh,
It should be in the page where the form is

How do you make it so previous generations disappear and it’s just a form again when the user comes back later?

Are you using Airtable to populate the list block? I guess you could set the “sort by” to “created” and then set to only show 1 item per page. So that way it will only show the most recent item.

I have the make scenario delete the previous generation that the user created so only the most recent populates into the list block. However, still having the 10-15 lag issue where the old one shows and the user has to reload for the new one to show up once ready. Have you figured that part out?

Are you using Airtable or Google Sheets to connect that data to the list block? I think you can just set it as per my previous above, which will only show you 1 result (the most recent).

hey Matthieu - could you explain how to do step 1 solution here?

I like this general approach but struggling to get it working…

  1. The spinner is not appearing
  2. I can’t get the webhook response to re-direct the page to the page. Here I’m using www.google.com just to test