Optimize table loading (#866)

* wip

* wip

* Ok

* Deleted unused code

* Fixed lint

* Minor fixes

* Minor fixes

* Minor Fixes

* Minor merge fixes

* Ok

* Fix storybook tests

* Removed console.log

* Fix login

* asd

* Fixed storybook

* Added await

* Fixed await

* Added sleep for failing test

* Fix sleep

* Fix test

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/inplace-input/components/InplaceInputDoubleText.tsx

@@ -1,7 +1,7 @@
 import { ChangeEvent } from 'react';
 import styled from '@emotion/styled';
 
-import { InplaceInputTextEditMode } from '@/ui/inplace-input/components/InplaceInputTextEditMode';
+import { StyledInput } from '@/ui/inplace-input/components/InplaceInputTextEditMode';
 
 type OwnProps = {
   firstValue: string;
@@ -31,7 +31,7 @@ export function InplaceInputDoubleText({
 }: OwnProps) {
   return (
     <StyledContainer>
-      <InplaceInputTextEditMode
+      <StyledInput
         autoFocus
         placeholder={firstValuePlaceholder}
         value={firstValue}
@@ -39,7 +39,7 @@ export function InplaceInputDoubleText({
           onChange(event.target.value, secondValue);
         }}
       />
-      <InplaceInputTextEditMode
+      <StyledInput
         placeholder={secondValuePlaceholder}
         value={secondValue}
         onChange={(event: ChangeEvent<HTMLInputElement>) => {

front/src/modules/ui/inplace-input/components/InplaceInputTextEditMode.tsx

@@ -1,9 +1,58 @@
+import { ChangeEvent, useEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 
 import { textInputStyle } from '@/ui/themes/effects';
 
-export const InplaceInputTextEditMode = styled.input`
+import { useRegisterCloseCellHandlers } from '../../table/editable-cell/hooks/useRegisterCloseCellHandlers';
+
+export const StyledInput = styled.input`
   margin: 0;
   width: 100%;
   ${textInputStyle}
 `;
+
+type OwnProps = {
+  placeholder?: string;
+  autoFocus?: boolean;
+  value: string;
+  onSubmit: (newText: string) => void;
+};
+
+export function InplaceInputTextEditMode({
+  placeholder,
+  autoFocus,
+  value,
+  onSubmit,
+}: OwnProps) {
+  const [internalText, setInternalText] = useState(value);
+
+  const wrapperRef = useRef(null);
+
+  function handleSubmit() {
+    onSubmit(internalText);
+  }
+
+  function handleCancel() {
+    setInternalText(value);
+  }
+
+  function handleChange(event: ChangeEvent<HTMLInputElement>) {
+    setInternalText(event.target.value);
+  }
+
+  useEffect(() => {
+    setInternalText(value);
+  }, [value]);
+
+  useRegisterCloseCellHandlers(wrapperRef, handleSubmit, handleCancel);
+
+  return (
+    <StyledInput
+      ref={wrapperRef}
+      placeholder={placeholder}
+      onChange={handleChange}
+      autoFocus={autoFocus}
+      value={internalText}
+    />
+  );
+}