In this lesson, we're going to learn how we can set up this loading indicator, which appears while an image is being uploaded. Now, I want to give you a clue here for how to set this up, and then I really want to challenge you to try and set this up on your own.

The clue is this: if you add an icon—and let's make it a little bigger so we can see what we're working with here—and center it, change the color just for good measure. What you can do with an icon is you can tick this little guy here: make the icon rotate. And so, of course, if you have an icon that, when rotating, kind of gives the impression that something is happening, then you have just a really basic loading indicator.

So, this is my clue. Try and see if you can get this icon to appear while the image is being uploaded. Right. Go on. I'll wait here. Go on. You've done it. Have you done it? You better have done it—or you better have at least tried. Okay. I don't mind if you succeed. I just want you to try.

Let's go through it together now, and maybe you've done it in a better way than I have. I don't know.

So, how I would have done this is had this icon, by default, not be visible, right? Because when the user loads this view, this create/edit view, we don't want that icon to be visible. And then we need to create some kind of condition under which it should become visible.

So, what could that condition be? Well, it obviously needs to happen after one of these buttons is clicked. So let's use the camera access workflow as a starting point.

Basically, one way of thinking about this is: at the beginning of this workflow, I want to show the loading indicator. And when the workflow is finished, that's sort of the same thing as the image being uploaded, and in that case, I want to hide the loading indicator or the loading icon.

So, what could we do here to control those two states? I gave you another clue there: states. Yes, custom states. Custom states are a really versatile tool that just allow us to hold any arbitrary temporary data, right? And the data that we want to hold in this context is: is the image currently being uploaded?

So, what we could do is, right up front at the start of this workflow, we could set a custom state. And so, we need to create this custom state. Now, I've said before: always a good idea to add this at the parent layer or the parent group for the module that it corresponds to.

So, in our case, we've got this group image, which we might even call group_add_image to be a little bit more descriptive. To me, that's the highest level here. So, what we can do is we can click on this little eye icon and add a new custom state, or just directly from the workflow. If I choose this group_add_image, I can, from here, create a new custom state.

And this custom state could just be something like uploading, right? And what type of thing is it? Well, it's something that's either going to be true or it's going to be false, right? Okay, in other words, it's either going to be yes or it's going to be no. So, probably yes/no. It's going to be a yes/no type field. And we can set the value here to be yes.

Now, as it turns out with custom states, if we go and view the custom state here within the element inspector, you can actually set a default value for a custom state. It actually won't make any difference in this case, but if it makes you feel better, we can have it default to no, because when this view is first loaded, nothing is being uploaded, right? But it can be really useful to have a default value here for your custom states.

So, we're going to set it to be yes. And then at the end of this workflow, we're going to set it to be no. So, rather than going through and adding this whole action all over again, I'm just going to delete it. And I'm going to be lazy: I'm going to right-click on the existing set custom state action that we created and copy it. And then right-click paste. And then I'm just going to change one thing, which is, of course, setting the value back to no.

And so, because we now have this custom state, which has been toggled to yes before we show the camera and being toggled to no after the image has been uploaded, what I can do is, on my loading icon—which I can maybe call load_icon_loading—I can add a condition here under which it should be visible, which of course is going to be: fill in the gap.

It's going to be: is that custom state, living on group_add_image, uploading, yes? And as we learned in the last lesson, you don't really need to add the "is yes." uploading is yes is the same thing as simply uploading, shorthand for "is yes." Then this element is going to be visible.

So, let's test this out. I will go to add a photo, and you saw it kind of appear there for a split second. If I now go to add a photo, you see there's our loading indicator. We still see the buttons. We can probably deal with that in a second as well. But then, once the image has been uploaded, the loading indicator goes away. So, we're kind of halfway there.

Now, interestingly enough, if I try to take a photo here and I just end up hitting cancel, the loading indicator will also disappear. And that's because what Bubble is basically doing is: if the user doesn't select an image after this action, it's not going to be able to do anything here making changes to the diary entry. So, this action is essentially going to be redundant. And then we're still going to set this custom state back to no.

Now, let's deal with the visibility of these buttons, because we don't want these buttons to be visible while the loading indicator is visible too. So again, how would we solve this? Try and figure it out for yourself.

Otherwise, well, there's sort of two conditions under which these buttons should be visible: yes/no, image should not have been uploaded yet, but also the loading indicator shouldn't be visible. So, you could actually just say: yep, is the diary entry's image empty? In other words, the user hasn't uploaded an image yet.

But also, that loading indicator cannot be visible. So we can choose here: isn't visible, right? Or, what we could also do, since we have this uploading state in a custom state, is literally just point to that custom state. So, is the group_add_image uploading custom state no?

All right. If both of those conditions are true—if the user hasn't uploaded an image yet and they aren't currently uploading one—then, of course, let's show the buttons. So, if I try this out, then you can see that the buttons weren't appearing there. Great.

Let's get my ugly mug off that page. And so, that was all the logic for when "take photo" is tapped. We would just do exactly the same thing. If I copy this set state action to my clipboard, we can just do exactly the same thing when an image is chosen from the user's photo library.

So, on this "choose from library" workflow, again, I'm just going to add in the action to set that uploading state to yes right at the beginning of the workflow. And then, right at the end, I'm going to set it to be no.

All right. So, that was a little bit of finessing of our user experience. What we probably also want to do is add a little delete icon so users can remove an image that they've added to one of their diary entries. So, we'll deal with that in the next lesson.