Passwordless Loader

Author: smgv

packages/modal/src/ui/components/Loader/Loader.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { MODAL_STATUS } from "../../interfaces";
 import i18n from "../../localeImport";
 import Image from "../Image";
+import PulseLoader from "../PulseLoader";
 import { ConnectedStatusType, ConnectingStatusType, ErroredStatusType, LoaderProps } from "./Loader.type";
 
 /**
@@ -27,11 +28,7 @@ function ConnectingStatus(props: ConnectingStatusType) {
           <img src={appLogo} alt="" className="w3a--size-full w3a--object-contain" />
         </figure>
 
-        <div className="w3a--flex w3a--items-center w3a--justify-center w3a--gap-x-2">
-          <div className="w3a--animate-circle w3a--bg-app-gray-500 dark:w3a--bg-app-gray-200" />
-          <div className="w3a--animate-circle w3a--bg-app-gray-400 dark:w3a--bg-app-gray-400" />
-          <div className="w3a--animate-circle w3a--bg-app-gray-200 dark:w3a--bg-app-gray-600" />
-        </div>
+        <PulseLoader />
 
         {providerIcon}
       </div>

packages/modal/src/ui/components/Login/LoginPasswordLess/LoginPasswordLess.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 
 import i18n from "../../../localeImport";
 import { cn, getIcons } from "../../../utils";
+import PulseLoader from "../../PulseLoader";
 import { LoginPasswordLessProps } from "./LoginPasswordLess.type";
 
 function LoginPasswordLess(props: LoginPasswordLessProps) {
@@ -100,11 +101,9 @@ function LoginPasswordLess(props: LoginPasswordLessProps) {
             "w3a--w-full w3a--appearance-none w3a--bg-transparent w3a--text-app-gray-900 w3a--outline-none placeholder:w3a--text-xs placeholder:w3a--text-app-gray-400 focus:w3a--outline-none active:w3a--outline-none dark:w3a--text-app-white dark:placeholder:w3a--text-app-gray-500"
           )}
           onKeyDown={(e) => handleEnter(e)}
+          disabled={isPasswordLessLoading}
         />
-        {isPasswordLessLoading && (
-          // TODO: Add loading spinner
-          <div>Loading..</div>
-        )}
+        {isPasswordLessLoading && <PulseLoader />}
         {inputValue && !isPasswordLessLoading && (
           <button type="button" className="w3a--icon-animation w3a--appearance-none" onClick={onFormSubmit}>
             <img src={getIcons(isDark ? "chevron-right-dark" : "chevron-right-light")} alt="arrow" />

packages/modal/src/ui/components/PulseLoader/PulseLoader.tsx

@@ -0,0 +1,11 @@
+const PulseLoader = () => {
+  return (
+    <div className="w3a--flex w3a--items-center w3a--justify-center w3a--gap-x-2">
+      <div className="w3a--animate-circle w3a--bg-app-gray-500 dark:w3a--bg-app-gray-200" />
+      <div className="w3a--animate-circle w3a--bg-app-gray-400 dark:w3a--bg-app-gray-400" />
+      <div className="w3a--animate-circle w3a--bg-app-gray-200 dark:w3a--bg-app-gray-600" />
+    </div>
+  );
+};
+
+export default PulseLoader;

packages/modal/src/ui/components/PulseLoader/index.ts

@@ -0,0 +1 @@
+export { default } from "./PulseLoader";