Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

OpenAI Loading Animation - Using CSS

In this Bubble tutorial we demonstrate how to improve your Bubble app's UX (user experience) by showing a loading animation while you wait for a response from the OpenAI API (ChatGPT). This tutorial uses a CSS animation from loading.io.

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.

Improving User Experience while Waiting on OpenAI

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.

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 Loading 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. 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.

Adding and Customizing Loading Animation

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 element 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. 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.

Integrating CSS Animation into Bubble Workflow

Let's just get this in a sensible range. Okay, that's going to work just fine. 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. 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 upfront. 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.

Practical Application of CSS Animation in Bubble

Let's try that. So I'm going to fill up 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. 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 is dependent on the number of tokens that you send and receive. And there are plug-ins 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. 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.

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.

Latest videos

menu