OpenAI Loading Animation - Using CSS

Integrating OpenAI with Bubble

There's a question we've been asked a lot about integrating your Bubble app with the OpenAI API to generate AI content. And that is, can you make OpenAI quicker? The short answer is no, because that's down to their servers and their service. But you can offer your users visual feedback to tell them that something is happening. And this is particularly useful because Bubble doesn't support the OpenAI text streaming protocol, at least not yet. So in this video, I'm going to show you how you can provide your users with a loading animation while you wait on OpenAI and then remove the animation when you're done.

Exclusive Bubble Tutorials

And if you're learning Bubble, you need to check out our website planetnocode.com because we've got videos on there exclusive to our members that you cannot find on YouTube. We've got hundreds of videos available at planetnocode.com.

Using Loading.io for Animations

So I'm going to, in this demonstration, use a loading animation from loading.io. And I like them because they've got a lot of choice here. There are a lot of free ones. But you can also export in a number of different formats. And I'm going to demonstrate how you can do it with CSS. And I like doing it with CSS because you're not going to experience the pixelation. You might experience with a GIF. It's always going to be crisp. And also, it's not going to have the impact on page load that loading an image or a series of images might take, which is what's required if you're loading in any other form of animated image.

Setting Up the Demo

So I've got my demo here. And basically, when I click Submit, I want to show loading and then I want to show the results. So let's add in a HTML elements because this is going to be my loading animation. And go into loading. And then I click on CSS. And then free download. I'm going to copy this into here. And just play with this a little bit.

Adjusting the Animation Size

Okay, so I'm going to eyeball this, but obviously you could make the design a lot cleaner. It's probably going to be more like 120. Way too small. Yeah. And then we just need a little bit more extra height. Obviously, this is going to depend on the size of the CSS element. You might need to tinker slightly with some of the code in here. But anyway, I just want to make sure that it's now all visible. Let's just get this in the sensible range. Okay, that's going to work just fine.

Configuring Visibility

So now if I click Preview, the loading animation is going to be visible by default and so is my text error. So instead, I'm going to tell this one to not be visible on page load and to collapse when empty. And the same with here. Not be visible on page load, collapse when empty.

Creating the Workflow

And then on Submit, I'm going to add two additional actions into my workflow. One is to show element. So I'm going to show my HTML element because that's where my loading CSS animation is. And I'm going to put that up front. I'm then going to put here, which is... So OpenAI makes the call. This is where the waiting happens. This is where the response is saved. In this case, I'm using a custom state. And so I can here, I can say Show... Which one is it? Multiline input. That's where I'm displaying my response. And then I can hide the HTML. Let's try that.

Testing the Implementation

So I'm going to fill in my form and we'll say again, which is better, WordPress or Bubble. For those of you who don't know, I come from a WordPress background and I love them both equally. But let's see what OpenAI says on the topic.

Enhancing User Experience

So you can see that the loading animation has come in now. And it's going to stay there while OpenAI takes its time. If you really wanted to offer an incredible user experience, you could look at how OpenAI's response time is dependent on the number of tokens that you send and receive. And there are plugins available in Bubble which will calculate the tokens. I think you also get the tokens back when you send the OpenAI response, although they only come at the end.

Estimating Response Time

Anyway, the point being is that if you know the number of tokens, you can make a rough estimate of the amount of time, which means that you could display a progress bar that very roughly takes the amount of time to progress, required to get your response back.

Conclusion

Anyway, there you have it. That is how you can add in a UI element to improve the user experience in your Bubble app. If you're using Bubble and OpenAI by adding in a loading animation.