Crafting a Loading Spinner Button in Next.js 13

Daniel Craciun

·

Follow

Published in

Level Up Coding

·

3 min read

·

2 days ago

--

Essential Prerequisite Guide. ⬇️

Welcome to the enchanting realm of web development, where the user experience reigns supreme.

Picture this: a button that not only gracefully communicates “Loading…” but also dances with a custom-designed spinner, adding a dash of sophistication to your Next.js 13 project.

In this voyage, we won’t just embark on creating a loading spinner button; we’ll be crafting a pixel-perfect masterpiece that captivates users and elevates your web application to new heights.

So, without further ado, let’s immerse ourselves in the magic of Next.js 13 and weave the threads of creativity and functionality into our loading button. Ready to embark on this enchanting journey? Let’s dive in!

Table of Contents

• Setup Next.js 13 Project Environment
• Dependencies Installation
• Creating The Spinner Button
• Using the Spinner Button

Setup Next.js 13 Project Environment

To setup a Next.js project, please check out the instructions here. The installation process generally consists of running the following command in the terminal.

Dependencies Installation

Open a terminal within your project directory, and execute one of the following commands to get started:

# This command works after you've setup shadcn-ui in your project.
npx shadcn-ui@latest add button

# You may substitute with an icon library of your choice.
npm install lucide-react

Creating The Spinner Button

1. Make sure you have a components folder in your Next.js project with a file called SpinnerButton.tsx. This will contain the reusable Spinner Button code.
2. Copy the following code:

import { Loader2 } from "lucide-react"

import { Button, ButtonProps } from "@/components/ui/button"

interface SpinnerButtonProps extends ButtonProps {
 state: boolean
 name: string
}

export const SpinnerButton = ({
 state,
 name,
 ...props
}: SpinnerButtonProps) => {
 return (
 <Button {...props}>
 {state ? (
 <Loader2 className="h-4 w-4 animate-spin" />
 ) : (
 <span>{name}</span>
 )}
 </Button>
 )
}

• This code works by conditionally rendering the content of the button depending on it's state, which should be either true or false.
• If you are not using TypeScript, don’t worry about the interface and other type annotations; you may omit them.

Using the Spinner Button

To test the spinner button, we will create a submission form that utilizes the spinner button.

1. Inside the app/ directory, go into page.tsx and copy the following code:

"use client"

import { useState } from "react"

function Form() {
 const [isSubmitting, setIsSubmitting] = useState<boolean>(false)

 const handleSubmit = async () => {
 setIsSubmitting(true)

 // Here you would make an API call which would take
 // A certain amount of time.

 setIsSubmitting(false)

 }

 return (
 <form onSubmit={handleSubmit}>
 <SpinnerButton name="Submit" state={isSubmitting} type="submit" />
 </form>
 )
}

export default Form

NOTE: You will need to perform an asynchronous operation, e.g. a database call, otherwise the function executes too quickly and therefore will not show the spinner animation.

Here’s how it looks for me:

Conclusion

And that’s all there is to it!

This was a short and sweet article demonstrating the simplicity in implementing a loading spinner button for your Next.js 13 applications.

If you enjoyed this article, check out my profile for many more stories like this, and stay tuned for future articles! 👍

Further Reading 📖