fix: assignee dropdown, sign in button, and onboarding flicker fix (#1242)

apps/app/components/account/email-code-form.tsx

@@ -21,6 +21,7 @@ export const EmailCodeForm = ({ onSuccess }: any) => {
   const [codeResent, setCodeResent] = useState(false);
   const [isCodeResending, setIsCodeResending] = useState(false);
   const [errorResendingCode, setErrorResendingCode] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   const { setToastAlert } = useToast();
   const { timer: resendCodeTimer, setTimer: setResendCodeTimer } = useTimer();
@@ -64,16 +65,9 @@ export const EmailCodeForm = ({ onSuccess }: any) => {
   };
 
   const handleSignin = async (formData: EmailCodeFormValues) => {
-    await authenticationService
-      .magicSignIn(formData)
-      .then(() => {
-        setToastAlert({
-          title: "Success",
-          type: "success",
-          message: "Successfully logged in!",
-        });
-      })
-      .catch((error) => {
+    setIsLoading(true);
+    await authenticationService.magicSignIn(formData).catch((error) => {
+      setIsLoading(false);
       setToastAlert({
         title: "Oops!",
         type: "error",
@@ -200,9 +194,9 @@ export const EmailCodeForm = ({ onSuccess }: any) => {
               size="md"
               onClick={handleSubmit(handleSignin)}
               disabled={!isValid && isDirty}
-              loading={isSubmitting}
+              loading={isLoading}
             >
-              {isSubmitting ? "Signing in..." : "Sign in"}
+              {isLoading ? "Signing in..." : "Sign in"}
             </PrimaryButton>
           ) : (
             <PrimaryButton

apps/app/components/issues/view-select/assignee.tsx

@@ -126,7 +126,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
       position={position}
       disabled={isNotAllowed}
       selfPositioned={selfPositioned}
-      dropdownWidth="w-full min-w-[8rem]"
+      dropdownWidth="w-full min-w-[12rem]"
     />
   );
 };

apps/app/pages/onboarding.tsx

@@ -22,7 +22,7 @@ import {
   Workspace,
 } from "components/onboarding";
 // ui
-import { PrimaryButton } from "components/ui";
+import { PrimaryButton, Spinner } from "components/ui";
 // constant
 import { ONBOARDING_CARDS } from "constants/workspace";
 // types
@@ -34,6 +34,7 @@ import { CURRENT_USER } from "constants/fetch-keys";
 const Onboarding: NextPage = () => {
   const [step, setStep] = useState(1);
   const [userRole, setUserRole] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
 
   const [workspace, setWorkspace] = useState();
 
@@ -44,6 +45,11 @@ const Onboarding: NextPage = () => {
   return (
     <UserAuthorizationLayout>
       <DefaultLayout>
+        {isLoading ? (
+          <div className="grid h-screen place-items-center">
+            <Spinner />
+          </div>
+        ) : (
           <div className="relative grid h-full place-items-center p-5">
             {step <= 3 ? (
               <div className="h-full flex flex-col justify-center w-full py-4">
@@ -79,6 +85,7 @@ const Onboarding: NextPage = () => {
                       size="md"
                       onClick={() => {
                         if (step === 8) {
+                          setIsLoading(true);
                           userService
                             .updateUserOnBoard({ userRole }, user)
                             .then(async () => {
@@ -118,7 +125,8 @@ const Onboarding: NextPage = () => {
                                 Router.push(`/${lastActiveWorkspace.slug}`);
                                 return;
                               } else {
-                              const invitations = await workspaceService.userWorkspaceInvitations();
+                                const invitations =
+                                  await workspaceService.userWorkspaceInvitations();
                                 if (invitations.length > 0) {
                                   Router.push(`/invitations`);
                                   return;
@@ -129,6 +137,7 @@ const Onboarding: NextPage = () => {
                               }
                             })
                             .catch((err) => {
+                              setIsLoading(false);
                               console.log(err);
                             });
                         } else setStep((prevData) => prevData + 1);
@@ -145,6 +154,7 @@ const Onboarding: NextPage = () => {
               <span className="text-sm text-brand-base">{user?.email}</span>
             </div>
           </div>
+        )}
       </DefaultLayout>
     </UserAuthorizationLayout>
   );