Add optimistic rendering on right drawer title (#786)

* Add optimistic rendering on right drawer title

* Fix

* Fix

* Fix

* Fix

* Fix

* Fix

front/src/modules/activities/right-drawer/components/CommentThread.tsx

@@ -92,7 +92,7 @@ export function CommentThread({
   showComment = true,
   autoFillTitle = false,
 }: OwnProps) {
-  const { data } = useGetCommentThreadQuery({
+  const { data, loading } = useGetCommentThreadQuery({
     variables: {
       commentThreadId: commentThreadId ?? '',
     },
@@ -101,6 +101,13 @@ export function CommentThread({
   const commentThread = data?.findManyCommentThreads[0];
 
   const [title, setTitle] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!loading) {
+      setTitle(commentThread?.title ?? '');
+    }
+  }, [loading, setTitle, commentThread?.title]);
+
   const [hasUserManuallySetTitle, setHasUserManuallySetTitle] =
     useState<boolean>(false);
 
@@ -108,16 +115,27 @@ export function CommentThread({
 
   const debounceUpdateTitle = useMemo(() => {
     function updateTitle(title: string) {
-      updateCommentThreadMutation({
-        variables: {
-          id: commentThreadId,
-          title: title ?? '',
-        },
-        refetchQueries: [getOperationName(GET_COMMENT_THREAD) ?? ''],
-      });
+      if (commentThread) {
+        updateCommentThreadMutation({
+          variables: {
+            id: commentThreadId,
+            title: title ?? '',
+          },
+          refetchQueries: [getOperationName(GET_COMMENT_THREAD) ?? ''],
+          optimisticResponse: {
+            __typename: 'Mutation',
+            updateOneCommentThread: {
+              __typename: 'CommentThread',
+              id: commentThreadId,
+              title: title,
+              type: commentThread.type,
+            },
+          },
+        });
+      }
     }
     return debounce(updateTitle, 200);
-  }, [commentThreadId, updateCommentThreadMutation]);
+  }, [commentThreadId, updateCommentThreadMutation, commentThread]);
 
   function updateTitleFromBody(body: string) {
     const parsedTitle = JSON.parse(body)[0]?.content[0]?.text;
@@ -127,12 +145,6 @@ export function CommentThread({
     }
   }
 
-  useEffect(() => {
-    if (commentThread) {
-      setTitle(commentThread?.title ?? '');
-    }
-  }, [commentThread]);
-
   if (!commentThread) {
     return <></>;
   }

front/src/modules/ui/table/components/EntityTable.tsx

@@ -22,7 +22,7 @@ const StyledTable = styled.table`
   width: calc(100% - ${({ theme }) => theme.table.horizontalCellMargin} * 2);
 
   th {
-    border: 1px solid ${({ theme }) => theme.background.tertiary};
+    border: 1px solid ${({ theme }) => theme.border.color.light};
     border-collapse: collapse;
     color: ${({ theme }) => theme.font.color.tertiary};
     padding: 0;
@@ -42,7 +42,7 @@ const StyledTable = styled.table`
   }
 
   td {
-    border: 1px solid ${({ theme }) => theme.background.tertiary};
+    border: 1px solid ${({ theme }) => theme.border.color.light};
     border-collapse: collapse;
     color: ${({ theme }) => theme.font.color.primary};
     padding: 0;