Introduction

In the rapidly evolving digital world, where every moment matters, providing an excellent user experience is paramount. When users visit your music streaming platform—like a clone of Spotify—their journey should be as visually appealing as it is musically satisfying.

A thoughtfully designed loading spinner goes beyond a mere animation. It creates a compelling blend of user engagement, anticipation, and visual delight. In this guide, we'll explore the principles and techniques for creating a loading spinner that integrates beautifully with your music website, enriching the user experience even during brief waiting periods. Get ready to dive into methods, strategies, and creative tips that will keep your users engaged.

Let's Get Started!

As I work on developing my Spotify clone, I haven't yet implemented the song fetching feature, which currently leaves the interface looking a bit rough. However, I aim to enable users to upload their songs, initially allowing all users to do so for testing purposes, while eventually restricting this to verified artists.

This is where the loading animation comes into play. Using NextJS and Supabase, I perform several database operations when users select files, which can take some time. To maintain user awareness, I disable the upload button, but I need something to visually indicate that a process is underway.

Let's begin with the song upload process. When you fill out the modal fields and click "Create," the button will be disabled to prevent multiple submissions.

const onSubmit: SubmitHandler = async (values) => {

try {

setIsLoading(true);

const imageFile = values.image?.[0];

const songFile = values.song?.[0];

if (!imageFile || !songFile || !user) {

toast.error('Missing fields');

return;

}

const uniqueId = uniqid();

// Uploading the song.

const { data: songData, error: songError } = await supabaseClient.storage.from('songs').upload(song-${values.title}-${uniqueId}, songFile, {

cacheControl: '3600',

upsert: false

});

if (songError) {

setIsLoading(false);

console.log(songError);

return toast.error('Failed song upload!');

}

// Uploading the image.

const { data: imageData, error: imageError } = await supabaseClient.storage.from('images').upload(image-${values.title}-${uniqueId}, imageFile, {

cacheControl: '3600',

upsert: false

});

if (imageError) {

setIsLoading(false);

console.log(imageError);

return toast.error('Failed image upload!');

}

// Record the upload in the database.

const { error: supabaseError } = await supabaseClient.from('songs').insert({

user_id: user.id,

title: values.title,

author: values.author,

image_path: imageData.path,

song_path: songData.path

});

if (supabaseError) {

setIsLoading(false);

return toast.error(supabaseError.message);

}

// Successful upload.

router.refresh();

setIsLoading(false);

toast.success('Song uploaded!');

reset();

uploadModal.onClose();

} catch (err) {

toast.error("Something went wrong during uploading");

console.log(err);

} finally {

setIsLoading(false);

}

};

As demonstrated, the process may take some time. This is why I implement the isLoading property to display the loading spinner. To visualize this, I will temporarily set the loading state to true and capture a screenshot of the spinner.

const [isLoading, setIsLoading] = useState(true);

This state will be modified as the upload process progresses. Once the database response is received, the state will revert to false, thus removing the loading component.

To enhance the visual experience, I decided to incorporate a loading spinner library. I find it convenient to utilize an existing React library by running the following command:

npm install --save react-spinners

You can explore the various components available in the demo link. I opted for the "BeatLoader," though all options are quite appealing. For social media applications, a spinner with hashtags might be particularly fitting!

Now, I will place my loading component above the "Create" button:

<div className="spinner-container">

{isLoading && <BeatLoader />}

</div>

This div will contain the spinner, and the loading property will control its visibility. The spinner will be displayed when a user attempts to upload a song, providing feedback that the application is processing their request.

After the upload completes—whether successful or not—I will notify the user via a toast message and stop the loading state, effectively removing the spinner.

Conclusion

This project is not only intriguing but also serves as a practical guide for future reference. I hope you find this information as helpful as I will. Thank you for joining me, and I look forward to our next exploration. Until then, happy coding!

Chapter 2: Loading Spinner Tutorials

Discover tutorials that will guide you through creating captivating loading spinners tailored for your music application.

In the first video, "How To Create An Advanced Animated Loading Spinner," you will learn how to design a visually stunning loading spinner that enhances user engagement.

The second video, "Animated Loading Spinner Tutorial," provides step-by-step instructions for implementing an animated loading spinner in your projects.