feat(profile): Implement Optimistic UI for Profile Management

[BigBen-7]

Closes #14

Description

This pull request significantly enhances the user experience of the engineer profile page by implementing optimistic updates for all mutable fields (bio, anthem, photos).

When a user saves their changes, the UI now updates instantly, providing immediate feedback and making the application feel faster and more responsive. The actual API request happens in the background. In the rare case of a server error, the UI gracefully reverts to its original state and notifies the user, ensuring data integrity and a seamless experience.

---

Implementation Details

Optimistic Mutation Flow

• TanStack Query: The core logic is managed by TanStack Query's useMutation hook, which provides a robust framework for handling optimistic updates.

• Immediate UI Update (onMutate):

  • When a user submits the form, the onMutate handler is triggered.
  • It immediately cancels any ongoing queries for the profile data to prevent conflicts.
  • It captures a snapshot of the current UI state to enable rollbacks.
  • Finally, it sets the local query data to the new, optimistic state, causing the UI to re-render instantly with the user's changes.

• Error Handling & Rollback (onError):

  • If the background API call fails, the onError handler is executed.
  • It uses the snapshot captured in onMutate to roll back the local query data to its original state, seamlessly reverting the UI.
  • A toast notification is displayed to the user, clearly communicating that the update failed.

• Data Synchronization (onSettled):

  • Regardless of success or failure, the onSettled handler re-fetches the profile data to ensure the UI is perfectly synchronized with the server's state.

---

How to Test

Happy Path (Successful Update)

1. Navigate to the profile editing page.
2. Modify the "bio" or "anthem" fields.
3. Click "Save".
4. Observe: The UI should update instantly with the new text. The change should persist after a page refresh.

Unhappy Path (API Failure & Rollback)

1. Navigate to the profile editing page.
2. Open your browser's developer tools and go to the "Network" tab.
3. Enable "Offline" mode to simulate a network failure.
4. Modify any profile field and click "Save".
5. Observe:
   • The UI should update instantly with your changes.
   • A moment later, the UI should revert back to its original state.
   • A toast notification should appear, indicating that the update failed.
6. Disable "Offline" mode to restore the connection.