Added loaders

src/pages/Estimation/Estimation.tsx

@@ -4,7 +4,7 @@ import { getRouteApi } from '@tanstack/react-router';
 import TaskSidebar from './components/TaskSidebar';
 import VoteSelection from './components/VoteSelection';
 import VoteList from './components/VoteList';
-import { Drawer } from '../../components';
+import { Drawer, Loader } from '../../components';
 import EditTicketForm from './components/EditTicketForm';
 import PlayerList from './components/PlayerList';
 import HtmlEmbed from '../../components/HtmlEmbed';
@@ -22,8 +22,8 @@ const Estimation: React.FC = () => {
 
   useEffect(() => estimationState?.setSessionId(sessionId), [sessionId]);
 
-  if (!estimationState?.currentSessionData) {
-    return null; // TODO: Add a loader
+  if (estimationState?.currentSessionData?.id !== sessionId) {
+    return <Loader fullHeight center />;
   }
 
   const {

src/pages/Estimation/components/EditTicketForm.tsx

@@ -81,9 +81,16 @@ const EditTicketForm: React.FC<EditTicketFormProps> = ({
             />
           )}
         </form.Field>
-        <form.Subscribe selector={(state) => [state.canSubmit]}>
-          {([canSubmit]) => (
-            <Button type="submit" disabled={!canSubmit} fullWidth>
+        <form.Subscribe
+          selector={(state) => [state.canSubmit, state.isSubmitting]}
+        >
+          {([canSubmit, isSubmitting]) => (
+            <Button
+              type="submit"
+              disabled={!canSubmit}
+              isLoading={isSubmitting}
+              fullWidth
+            >
               Update
             </Button>
           )}

src/pages/Estimation/components/EstimationResult.tsx

@@ -81,9 +81,15 @@ const EstimationResult: React.FC<VoteListProps> = ({
             />
           )}
         </form.Field>
-        <form.Subscribe selector={(state) => [state.canSubmit]}>
-          {([canSubmit]) => (
-            <Button type="submit" disabled={!canSubmit}>
+        <form.Subscribe
+          selector={(state) => [state.canSubmit, state.isSubmitting]}
+        >
+          {([canSubmit, isSubmitting]) => (
+            <Button
+              type="submit"
+              disabled={!canSubmit}
+              isLoading={isSubmitting}
+            >
               Save
             </Button>
           )}

src/pages/Join.tsx

@@ -5,6 +5,7 @@ import {
   SessionInviteInfo,
 } from '../lib/functions/estimationSessionInvite';
 import { getRouteApi } from '@tanstack/react-router';
+import { Loader } from '../components';
 
 const route = getRouteApi('/_authenticated/join/$sessionId');
 
@@ -40,8 +41,7 @@ const Join = () => {
   };
 
   if (!sessionInfo || isLoading) {
-    // TODO: add loader
-    return <p>Loading...</p>;
+    return <Loader fullHeight center />;
   }
 
   if (!sessionInfo.success) {

src/pages/Login.tsx

@@ -65,13 +65,14 @@ const Login = () => {
             )}
           </form.Field>
 
-          <form.Subscribe selector={(state) => [state.canSubmit]}>
-            {([canSubmit]) => (
+          <form.Subscribe
+            selector={(state) => [state.canSubmit, state.isSubmitting]}
+          >
+            {([canSubmit, isSubmitting]) => (
               <div>
-                {/* TODO: Add loader when [state.isSubmitting] */}
                 <div className="flex items-center justify-between gap-4">
                   <Button
-                    disabled={!canSubmit}
+                    disabled={!canSubmit || isSubmitting}
                     onClick={(e) => {
                       e.preventDefault();
                       e.stopPropagation();
@@ -85,7 +86,7 @@ const Login = () => {
                   </Button>
 
                   <Button
-                    disabled={!canSubmit}
+                    disabled={!canSubmit || isSubmitting}
                     color={ButtonColor.Secondary}
                     onClick={(e) => {
                       e.preventDefault();

src/pages/Profile.tsx

@@ -50,9 +50,16 @@ const Profile = () => {
               );
             }}
           </updateUsernameForm.Field>
-          <updateUsernameForm.Subscribe selector={(state) => [state.canSubmit]}>
-            {([canSubmit]) => (
-              <Button type="submit" disabled={!canSubmit} fullWidth>
+          <updateUsernameForm.Subscribe
+            selector={(state) => [state.canSubmit, state.isSubmitting]}
+          >
+            {([canSubmit, isSubmitting]) => (
+              <Button
+                type="submit"
+                disabled={!canSubmit}
+                isLoading={isSubmitting}
+                fullWidth
+              >
                 Update
               </Button>
             )}