First things first, log into Adalo and open up the project where you want to add that spinner component.

On the left side of the Adalo editor, you'll see the Components panel. This is where all the magic happens. It's got all the components you can add to your app.

Now, either scroll through the list or use the search bar in the Components panel to find the Spinner component.

Just drag the Spinner component from the Components panel and drop it onto the screen where you want it to appear. Easy peasy.

Once you've got the Spinner on your screen, click on it. This will open up the properties panel on the right side. Here, you can tweak settings like size, color, and when it should be visible.

In the settings options for the Spinner, you'll find a section for visibility conditions. Set these up to decide when the spinner should show up. Usually, it's for things like loading data or performing some action.

If your spinner is supposed to indicate a loading state during an action like a database query or API call, make sure its visibility matches the timing of that action. For instance, have it appear when a button is clicked and disappear once the data is loaded.

Use Adalo's preview function to test your app. Check to see if the spinner shows up and disappears correctly based on the conditions and actions you've set.

After testing, go back to the Adalo editor and make any tweaks needed to the spinner's size, color, or visibility conditions to make sure it fits perfectly with your app's design and functionality.