fix: Single State for Button Disable and Loading

[mohdjami]

fixes #711

Description

Created a single state for both loading and disabling buttons.
This code not only adds a single state to the Login page but also reduces the use of separate loaders without affecting any error handling in the form. No need to maintain separate states for each button.

Used states before changes

  const [isLoginWithEmail, setIsLoginWithEmail] = useState<boolean>(false);
  const [isLoginWithGoogle, setIsLoginWithGoogle] = useState<boolean>(false);
  const [isLoginWithLinkedIn, setIsLoginWithLinkedIn] =
    useState<boolean>(false);

State after changes

 const [clickedMethod, setClickedMethod] = useState<AuthMethod | undefined>(
    undefined,
  );

Example button before changes

          <Button
              onClick={() => {
                setIsLoginWithLinkedIn(true);
                signIn("linkedin", {
                  ...(next && next.length > 0 ? { callbackUrl: next } : {}),
                }).then((res) => {
                  if (res?.status) {
                    setIsLoginWithLinkedIn(false);
                  }
                });
              }}
              disabled={isLoginWithLinkedIn}
              className="flex items-center justify-center space-x-2 border border-gray-200 bg-gray-100 font-normal text-gray-900 hover:bg-gray-200"
            >
              {isLoginWithLinkedIn ? (
                <Loader className="mr-2 h-5 w-5 animate-spin " />
              ) : (
                <LinkedIn />
              )}
              <span>Continue with LinkedIn</span>
            </Button>

Example button after changes

          <Button
              onClick={() => {
                setClickedMethod("google");
                signIn("google", {
                  ...(next && next.length > 0 ? { callbackUrl: next } : {}),
                }).then((res) => {
                  if (res?.status) {
                    setClickedMethod(undefined);
                  }
                });
              }}
              loading={clickedMethod === "google"}
              disabled={clickedMethod && clickedMethod !== "google"}
              className="flex items-center justify-center space-x-2 border border-gray-200 bg-gray-100 font-normal text-gray-900 hover:bg-gray-200"
            >
              <Google className="h-5 w-5" />
              <span>Continue with Google</span>
            </Button>

Preview

fixed.loading.state.mp4

This improves user experience by preventing multiple actions and maintaining a clear visual indication of the active button.

Final:

final.demo.mp4

[vercel]

@mohdjami is attempting to deploy a commit to the mftsio Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

All contributors have signed the CLA ✍️ ✅
_{Posted by the CLA Assistant Lite bot.}

[mohdjami]

I have read the CLA Document and I hereby sign the CLA

[HarshTiwari-err]

@mohdjami
Please test one scenario:
Enter the email and click the submit button.
Check if your email is stuck on loading if there is any sort of server error.

[mohdjami]

@mohdjami Please test one scenario: Enter the email and click the submit button. Check if your email is stuck on loading if there is any sort of server error.

Sure will do that, and try.

[mohdjami]

final.demo.mp4

I tested with email and google login. It works fine, Let me know if you find anything wrong. My goal in this PR was not to change the existing error handling but just to fix the loading and disabling.

[mfts]

Great job!

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
papermark	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 12, 2024 4:52am

[mohdjami]

@mfts Let me know if I need to make any changes.

[mohdjami]

@mfts Thanks for addressing all the issues. Let me know if I missed anything.

[oss-gg]

Awarding mohdjami: 150 points 🕹️ Well done! Check out your new contribution on oss.gg/mohdjami