Add optimistic rendering for tasks (#1140)

* Add optimistic rendering for tasks

* Refetch activities for lists updates

front/src/modules/activities/components/ActivityAssigneePicker.tsx

@@ -1,3 +1,5 @@
+import { useApolloClient } from '@apollo/client';
+
 import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
 import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
 import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
@@ -11,6 +13,8 @@ import {
   useUpdateActivityMutation,
 } from '~/generated/graphql';
 
+import { ACTIVITY_UPDATE_FRAGMENT } from '../queries/update';
+
 export type OwnProps = {
   activity: Pick<Activity, 'id'> & {
     accountOwner?: Pick<User, 'id' | 'displayName'> | null;
@@ -41,6 +45,8 @@ export function ActivityAssigneePicker({
       entityType: Entity.User,
       id: user.id,
       name: user.displayName,
+      firstName: user.firstName,
+      lastName: user.lastName,
       avatarType: 'rounded',
       avatarUrl: user.avatarUrl ?? '',
     }),
@@ -48,17 +54,34 @@ export function ActivityAssigneePicker({
     searchOnFields: ['firstName', 'lastName'],
   });
 
-  async function handleEntitySelected(
+  const client = useApolloClient();
+  const cachedActivity = client.readFragment({
+    id: `Activity:${activity.id}`,
+    fragment: ACTIVITY_UPDATE_FRAGMENT,
+  });
+
+  function handleEntitySelected(
     selectedUser: UserForSelect | null | undefined,
   ) {
     if (selectedUser) {
-      await updateActivity({
+      updateActivity({
         variables: {
           where: { id: activity.id },
           data: {
             assignee: { connect: { id: selectedUser.id } },
           },
         },
+        optimisticResponse: {
+          __typename: 'Mutation',
+          updateOneActivity: {
+            ...cachedActivity,
+            assignee: {
+              __typename: 'User',
+              ...selectedUser,
+              displayName: selectedUser.name,
+            },
+          },
+        },
       });
     }