4699 update the onboarding app placeholder

packages/twenty-front/src/modules/favorites/components/Favorites.tsx

@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import { Avatar } from 'twenty-ui';
 
 import { FavoritesSkeletonLoader } from '@/favorites/components/FavoritesSkeletonLoader';
+import { useIsMockedDrawerPage } from '@/navigation/hooks/useIsMockedDrawerPage';
 import { useIsPrefetchLoading } from '@/prefetch/hooks/useIsPrefetchLoading';
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
 import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
@@ -35,8 +36,11 @@ const StyledNavigationDrawerItem = styled(NavigationDrawerItem)`
 export const Favorites = () => {
   const { favorites, handleReorderFavorite } = useFavorites();
   const loading = useIsPrefetchLoading();
+  const isMockedDrawerPage = useIsMockedDrawerPage();
 
-  if (loading) {
+  const displayLoader = loading && !isMockedDrawerPage;
+
+  if (displayLoader) {
     return <FavoritesSkeletonLoader />;
   }
 

packages/twenty-front/src/modules/navigation/hooks/__tests__/useIsMockedDrawerPage.test.tsx

@@ -0,0 +1,52 @@
+import { renderHook } from '@testing-library/react';
+import { RecoilRoot } from 'recoil';
+
+import { useIsMockedDrawerPage } from '@/navigation/hooks/useIsMockedDrawerPage';
+import { AppPath } from '@/types/AppPath';
+import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
+
+jest.mock('~/hooks/useIsMatchingLocation');
+const mockUseIsMatchingLocation = jest.mocked(useIsMatchingLocation);
+
+const setupMockIsMatchingLocation = (pathname: string) => {
+  mockUseIsMatchingLocation.mockReturnValueOnce(
+    (path: string) => path === pathname,
+  );
+};
+
+const getResult = () =>
+  renderHook(
+    () => {
+      return useIsMockedDrawerPage();
+    },
+    {
+      wrapper: RecoilRoot,
+    },
+  );
+
+const shouldReturnTrueLocations = [
+  AppPath.Verify,
+  AppPath.Invite,
+  AppPath.SignInUp,
+  AppPath.ResetPassword,
+  AppPath.CreateWorkspace,
+  AppPath.PlanRequired,
+  AppPath.PlanRequiredSuccess,
+];
+
+describe('useIsMockedDrawerPage', () => {
+  Object.values(AppPath).forEach((location) => {
+    const expectedResult = shouldReturnTrueLocations.includes(location);
+    it(`should return ${
+      expectedResult ? 'true' : 'false'
+    } for location ${location}`, () => {
+      setupMockIsMatchingLocation(location);
+      const { result } = getResult();
+      if (expectedResult) {
+        expect(result.current).toBeTruthy();
+      } else {
+        expect(result.current).toBeFalsy();
+      }
+    });
+  });
+});

packages/twenty-front/src/modules/navigation/hooks/useIsMockedDrawerPage.ts

@@ -0,0 +1,15 @@
+import { AppPath } from '@/types/AppPath';
+import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
+
+export const useIsMockedDrawerPage = () => {
+  const isMatchingLocation = useIsMatchingLocation();
+  return (
+    isMatchingLocation(AppPath.Verify) ||
+    isMatchingLocation(AppPath.SignInUp) ||
+    isMatchingLocation(AppPath.Invite) ||
+    isMatchingLocation(AppPath.ResetPassword) ||
+    isMatchingLocation(AppPath.CreateWorkspace) ||
+    isMatchingLocation(AppPath.PlanRequired) ||
+    isMatchingLocation(AppPath.PlanRequiredSuccess)
+  );
+};

packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx

@@ -1,6 +1,7 @@
 import { useLocation } from 'react-router-dom';
 import { useIcons } from 'twenty-ui';
 
+import { useIsMockedDrawerPage } from '@/navigation/hooks/useIsMockedDrawerPage';
 import { ObjectMetadataNavItemsSkeletonLoader } from '@/object-metadata/components/ObjectMetadataNavItemsSkeletonLoader';
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { useIsPrefetchLoading } from '@/prefetch/hooks/useIsPrefetchLoading';
@@ -17,8 +18,11 @@ export const ObjectMetadataNavItems = () => {
 
   const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
   const loading = useIsPrefetchLoading();
+  const isMockedDrawerPage = useIsMockedDrawerPage();
 
-  if (loading) {
+  const displayLoader = loading && !isMockedDrawerPage;
+
+  if (displayLoader) {
     return <ObjectMetadataNavItemsSkeletonLoader />;
   }
 

packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx

@@ -20,7 +20,7 @@ const StyledTableContainer = styled.div`
 export const SignInBackgroundMockPage = () => {
   return (
     <PageContainer>
-      <PageHeader title="Objects" Icon={IconBuildingSkyscraper}>
+      <PageHeader title="Companies" Icon={IconBuildingSkyscraper}>
         <PageHotkeysEffect onAddButtonClick={() => {}} />
         <PageAddButton onClick={() => {}} />
       </PageHeader>