fb42046033
In this huge (sorry!) PR: - introducing objectMetadataItem in contextStore instead of objectMetadataId which is more convenient - splitting some big hooks into smaller parts to avoid re-renders - removing Effects to avoid re-renders (especially onViewChange) - making the view prefetch separate from favorites to avoid re-renders - making the view prefetch load a state and add selectors on top of it to avoir re-renders As a result, the performance is WAY better (I suspect the favorite implementation to trigger a lot of re-renders unfortunately). However, we are still facing a random app freeze on view creation. I could not investigate the root cause. As this seems to be already there in the precedent release, we can move forward but this seems a urgent follow up to me ==> EDIT: I've found the root cause after a few ours of deep dive... an infinite loop in RecordTableNoRecordGroupBodyEffect... prastoin edit: close https://github.com/twentyhq/twenty/issues/10253 --------- Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com> Co-authored-by: prastoin <paul@twenty.com>
91 lines
3.7 KiB
TypeScript
91 lines
3.7 KiB
TypeScript
import styled from '@emotion/styled';
|
|
|
|
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
|
|
import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState';
|
|
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
|
|
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
|
|
import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
|
|
import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
|
|
import { RecordTableWithWrappers } from '@/object-record/record-table/components/RecordTableWithWrappers';
|
|
import { SignInBackgroundMockContainerEffect } from '@/sign-in-background-mock/components/SignInBackgroundMockContainerEffect';
|
|
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
|
import { ViewBar } from '@/views/components/ViewBar';
|
|
import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
|
|
import { useRecoilValue } from 'recoil';
|
|
import { isDefined } from 'twenty-shared';
|
|
|
|
const StyledContainer = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow: auto;
|
|
`;
|
|
|
|
export const SignInBackgroundMockContainer = () => {
|
|
const objectNamePlural = 'companies';
|
|
const objectNameSingular = 'company';
|
|
const recordIndexId = 'sign-up-mock-record-table-id';
|
|
const viewBarId = 'companies-mock';
|
|
|
|
const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
|
|
|
|
const objectMetadataItem = useRecoilComponentValueV2(
|
|
contextStoreCurrentObjectMetadataItemComponentState,
|
|
'main-context-store',
|
|
);
|
|
|
|
return (
|
|
<StyledContainer>
|
|
<RecordIndexContextProvider
|
|
value={{
|
|
recordIndexId,
|
|
objectNamePlural,
|
|
objectNameSingular,
|
|
objectMetadataItem: objectMetadataItem ?? objectMetadataItems[0],
|
|
onIndexRecordsLoaded: () => {},
|
|
indexIdentifierUrl: () => '',
|
|
}}
|
|
>
|
|
<ViewComponentInstanceContext.Provider
|
|
value={{ instanceId: recordIndexId }}
|
|
>
|
|
<RecordFiltersComponentInstanceContext.Provider
|
|
value={{ instanceId: recordIndexId }}
|
|
>
|
|
<ContextStoreComponentInstanceContext.Provider
|
|
value={{
|
|
instanceId: 'main-context-store',
|
|
}}
|
|
>
|
|
<SignInBackgroundMockContainerEffect
|
|
objectNamePlural={objectNamePlural}
|
|
recordTableId={recordIndexId}
|
|
viewId={viewBarId}
|
|
/>
|
|
<ActionMenuComponentInstanceContext.Provider
|
|
value={{ instanceId: recordIndexId }}
|
|
>
|
|
{isDefined(objectMetadataItem) && (
|
|
<>
|
|
<ViewBar
|
|
viewBarId={viewBarId}
|
|
optionsDropdownButton={<></>}
|
|
/>
|
|
|
|
<RecordTableWithWrappers
|
|
objectNameSingular={objectNameSingular}
|
|
recordTableId={recordIndexId}
|
|
viewBarId={viewBarId}
|
|
updateRecordMutation={() => {}}
|
|
/>
|
|
</>
|
|
)}
|
|
</ActionMenuComponentInstanceContext.Provider>
|
|
</ContextStoreComponentInstanceContext.Provider>
|
|
</RecordFiltersComponentInstanceContext.Provider>
|
|
</ViewComponentInstanceContext.Provider>
|
|
</RecordIndexContextProvider>
|
|
</StyledContainer>
|
|
);
|
|
};
|