UI/UX: Lack of Loading States during Authentication

[codeCraft-Ritik]

Description:

When a user clicks "Login" or "Register," there is no visual feedback indicating that the request is in progress. Users might think the site is frozen and click the button multiple times, which can trigger duplicate network requests or cause the application to behave unexpectedly.

Solution:
Utilize the loading state provided by the Apollo useMutation hook to disable the submit button and show a spinner or "Loading..." text while the request is pending.

Code Implementation: In client/src/pages/Auth/Login.js and Register.js:

const [loginUser, { loading, error }] = useMutation(LOGIN_USER);

// In the return statement:
<button type="submit" disabled={loading}>
  {loading ? "Logging in..." : "Login"}
</button>