From 9b348adb6a7d2eb422c98e96ca0ec9ff7547d9a8 Mon Sep 17 00:00:00 2001
From: Surya Ashish <ashishsurya126@gmail.com>
Date: Thu, 19 Oct 2023 19:22:10 +0530
Subject: [PATCH] fix: added loading state to button (#11624)

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Udit Takkar <udit222001@gmail.com>
---
 apps/web/pages/auth/logout.tsx   | 14 ++++++++++++--
 apps/web/playwright/login.e2e.ts |  2 +-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/apps/web/pages/auth/logout.tsx b/apps/web/pages/auth/logout.tsx
index 43990d6eff..b0f5d87d20 100644
--- a/apps/web/pages/auth/logout.tsx
+++ b/apps/web/pages/auth/logout.tsx
@@ -1,7 +1,7 @@
 import type { GetServerSidePropsContext } from "next";
 import { signOut, useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -18,6 +18,7 @@ import { ssrInit } from "@server/lib/ssr";
 type Props = inferSSRProps<typeof getServerSideProps>;
 
 export function Logout(props: Props) {
+  const [btnLoading, setBtnLoading] = useState<boolean>(false);
   const { status } = useSession();
   if (status === "authenticated") signOut({ redirect: false });
   const router = useRouter();
@@ -35,6 +36,11 @@ export function Logout(props: Props) {
     return "hope_to_see_you_soon";
   };
 
+  const navigateToLogin = () => {
+    setBtnLoading(true);
+    router.push("/auth/login");
+  };
+
   return (
     <AuthContainer title={t("logged_out")} description={t("youve_been_logged_out")} showLogo>
       <div className="mb-4">
@@ -50,7 +56,11 @@ export function Logout(props: Props) {
           </div>
         </div>
       </div>
-      <Button href="/auth/login" className="flex w-full justify-center">
+      <Button
+        data-testid="logout-btn"
+        onClick={navigateToLogin}
+        className="flex w-full justify-center"
+        loading={btnLoading}>
         {t("go_back_login")}
       </Button>
     </AuthContainer>
diff --git a/apps/web/playwright/login.e2e.ts b/apps/web/playwright/login.e2e.ts
index 13f0cdd049..94569128f8 100644
--- a/apps/web/playwright/login.e2e.ts
+++ b/apps/web/playwright/login.e2e.ts
@@ -35,7 +35,7 @@ test.describe("user can login & logout succesfully", async () => {
       const signOutBtn = await page.locator(`text=${signOutLabel}`);
       await signOutBtn.click();
 
-      await page.locator('a[href="/auth/login"]').click();
+      await page.locator("[data-testid=logout-btn]").click();
 
       // Reroute to the home page to check if the login form shows up
       await expect(page.locator(`[data-testid=login-form]`)).toBeVisible();