fix: add optimistic UI for deleting member on org user table (#16662)

* add optimistic UI for deleting member

* Update packages/features/users/components/UserTable/DeleteMemberModal.tsx

* Remove previous Value

* Update packages/features/users/components/UserTable/DeleteMemberModal.tsx

* Update packages/features/users/components/UserTable/DeleteMemberModal.tsx

* fix onError

---------

Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>

packages/features/users/components/UserTable/DeleteMemberModal.tsx

@@ -13,13 +13,25 @@ export function DeleteMemberModal({ state, dispatch }: { state: State; dispatch:
   const utils = trpc.useUtils();
   const removeMemberMutation = trpc.viewer.teams.removeMember.useMutation({
     onSuccess() {
-      // We don't need to wait for invalidate to finish
-      Promise.all([
-        utils.viewer.teams.get.invalidate(),
-        utils.viewer.eventTypes.invalidate(),
-        utils.viewer.organizations.listMembers.invalidate(),
-      ]);
+      // @ts-expect-error rows can't be of type never[] but oldData can be due to the filter
+      utils.viewer.organizations.listMembers.setInfiniteData({ limit: 10, searchTerm: "" }, (oldData) => {
+        if (!oldData) return oldData;
+        return {
+          ...oldData,
+          pages: oldData.pages.map((page) => ({
+            ...page,
+            rows: page.rows.filter((member) => member.id !== state.deleteMember.user?.id),
+          })),
+        };
+      });
+
+      // Existing invalidations
+      Promise.all([utils.viewer.teams.get.invalidate(), utils.viewer.eventTypes.invalidate()]);
+
       showToast(t("success"), "success");
+
+      // Close the modal after successful deletion
+      dispatch({ type: "CLOSE_MODAL" });
     },
     async onError(err) {
       showToast(err.message, "error");