add skeleton when navigation drawer state is loading

## Context
Checked in the codebase where we are trying to rollback a non-active
transaction.


packages/twenty-server/src/engine/core-modules/auth/services/sign-in-up.service.ts
seemed to be the only place where it happens.

We could enforce this with a lint rule in the future 🤔

packages/create-twenty-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-twenty-app",
-  "version": "0.8.0-canary.6",
+  "version": "0.8.0-canary.7",
   "description": "Command-line interface to create Twenty application",
   "main": "dist/cli.cjs",
   "bin": "dist/cli.cjs",

packages/twenty-client-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twenty-client-sdk",
-  "version": "0.8.0-canary.6",
+  "version": "0.8.0-canary.7",
   "sideEffects": false,
   "license": "AGPL-3.0",
   "scripts": {

packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx

@@ -1,7 +1,10 @@
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { MainNavigationDrawerContent } from '@/navigation/components/MainNavigationDrawerContent';
+import { SettingsNavigationDrawerContent } from '@/navigation/components/SettingsNavigationDrawerContent';
 import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer';
-
-import { MainNavigationDrawer } from '@/navigation/components/MainNavigationDrawer';
-import { SettingsNavigationDrawer } from '@/navigation/components/SettingsNavigationDrawer';
+import { NavigationDrawer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
+import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
+import { useLingui } from '@lingui/react/macro';
 
 export type AppNavigationDrawerProps = {
   className?: string;
@@ -11,10 +14,23 @@ export const AppNavigationDrawer = ({
   className,
 }: AppNavigationDrawerProps) => {
   const isSettingsDrawer = useIsSettingsDrawer();
+  const { t } = useLingui();
+  const currentWorkspace = useAtomStateValue(currentWorkspaceState);
 
-  return isSettingsDrawer ? (
-    <SettingsNavigationDrawer className={className} />
-  ) : (
-    <MainNavigationDrawer className={className} />
+  return (
+    <NavigationDrawer
+      className={className}
+      title={
+        isSettingsDrawer
+          ? t`Exit Settings`
+          : (currentWorkspace?.displayName ?? '')
+      }
+    >
+      {isSettingsDrawer ? (
+        <SettingsNavigationDrawerContent />
+      ) : (
+        <MainNavigationDrawerContent />
+      )}
+    </NavigationDrawer>
   );
 };

packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerContent.tsx

@@ -1,25 +1,19 @@
-import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { NavigationDrawerAIChatContent } from '@/ai/components/NavigationDrawerAIChatContent';
 import { MainNavigationDrawerNavigationContent } from '@/navigation/components/MainNavigationDrawerNavigationContent';
 import { MainNavigationDrawerTabsRow } from '@/navigation/components/MainNavigationDrawerTabsRow';
-import { NavigationDrawer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
 import { NavigationDrawerFixedContent } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerFixedContent';
 import { NavigationDrawerScrollableContent } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerScrollableContent';
 import { navigationDrawerActiveTabState } from '@/ui/navigation/states/navigationDrawerActiveTabState';
 import { NAVIGATION_DRAWER_TABS } from '@/ui/navigation/states/navigationDrawerTabs';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 
-export const MainNavigationDrawer = ({ className }: { className?: string }) => {
+export const MainNavigationDrawerContent = () => {
   const navigationDrawerActiveTab = useAtomStateValue(
     navigationDrawerActiveTabState,
   );
-  const currentWorkspace = useAtomStateValue(currentWorkspaceState);
 
   return (
-    <NavigationDrawer
-      className={className}
-      title={currentWorkspace?.displayName ?? ''}
-    >
+    <>
       <NavigationDrawerFixedContent>
         <MainNavigationDrawerTabsRow />
       </NavigationDrawerFixedContent>
@@ -32,6 +26,6 @@ export const MainNavigationDrawer = ({ className }: { className?: string }) => {
           <MainNavigationDrawerNavigationContent />
         )}
       </NavigationDrawerScrollableContent>
-    </NavigationDrawer>
+    </>
   );
 };

packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerScrollableItems.tsx

@@ -1,28 +1,14 @@
+import { metadataStoreState } from '@/metadata-store/states/metadataStoreState';
 import { NavigationDrawerOpenedSection } from '@/navigation-menu-item/display/sections/components/NavigationDrawerOpenedSection';
-import { NavigationDrawerWorkspaceSectionSkeletonLoader } from '@/object-metadata/components/NavigationDrawerWorkspaceSectionSkeletonLoader';
-
+import { FavoritesSectionDispatcher } from '@/navigation-menu-item/display/sections/favorites/components/FavoritesSectionDispatcher';
+import { WorkspaceSectionDispatcher } from '@/navigation-menu-item/display/sections/workspace/components/WorkspaceSectionDispatcher';
 import { NavigationDrawerOtherSection } from '@/navigation/components/NavigationDrawerOtherSection';
+import { NavigationDrawerWorkspaceSectionSkeletonLoader } from '@/object-metadata/components/NavigationDrawerWorkspaceSectionSkeletonLoader';
+import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
 import { styled } from '@linaria/react';
-import { lazy, Suspense } from 'react';
 
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const FavoritesSectionDispatcher = lazy(() =>
-  import(
-    '@/navigation-menu-item/display/sections/favorites/components/FavoritesSectionDispatcher'
-  ).then((module) => ({
-    default: module.FavoritesSectionDispatcher,
-  })),
-);
-
-const WorkspaceSectionDispatcher = lazy(() =>
-  import(
-    '@/navigation-menu-item/display/sections/workspace/components/WorkspaceSectionDispatcher'
-  ).then((module) => ({
-    default: module.WorkspaceSectionDispatcher,
-  })),
-);
-
 const StyledScrollableItemsContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -30,13 +16,24 @@ const StyledScrollableItemsContainer = styled.div`
 `;
 
 export const MainNavigationDrawerScrollableItems = () => {
+  const metadataStore = useAtomFamilyStateValue(
+    metadataStoreState,
+    'navigationMenuItems',
+  );
+
+  const isNavigationMenuItemsLoading = metadataStore.status === 'empty';
+
   return (
     <StyledScrollableItemsContainer>
       <NavigationDrawerOpenedSection />
-      <Suspense fallback={<NavigationDrawerWorkspaceSectionSkeletonLoader />}>
-        <FavoritesSectionDispatcher />
-        <WorkspaceSectionDispatcher />
-      </Suspense>
+      {isNavigationMenuItemsLoading ? (
+        <NavigationDrawerWorkspaceSectionSkeletonLoader />
+      ) : (
+        <>
+          <FavoritesSectionDispatcher />
+          <WorkspaceSectionDispatcher />
+        </>
+      )}
       <NavigationDrawerOtherSection />
     </StyledScrollableItemsContainer>
   );

packages/twenty-front/src/modules/navigation/components/SettingsNavigationDrawerContent.tsx

@@ -1,5 +1,4 @@
 import { SettingsNavigationDrawerItems } from '@/settings/components/SettingsNavigationDrawerItems';
-import { NavigationDrawer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
 import { NavigationDrawerFixedContent } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerFixedContent';
 import { NavigationDrawerScrollableContent } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerScrollableContent';
 import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState';
@@ -7,18 +6,14 @@ import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
 import { useLingui } from '@lingui/react/macro';
 import { AdvancedSettingsToggle } from 'twenty-ui/navigation';
 
-export const SettingsNavigationDrawer = ({
-  className,
-}: {
-  className?: string;
-}) => {
+export const SettingsNavigationDrawerContent = () => {
   const { t } = useLingui();
   const [isAdvancedModeEnabled, setIsAdvancedModeEnabled] = useAtomState(
     isAdvancedModeEnabledState,
   );
 
   return (
-    <NavigationDrawer className={className} title={t`Exit Settings`}>
+    <>
       <NavigationDrawerScrollableContent>
         <SettingsNavigationDrawerItems />
       </NavigationDrawerScrollableContent>
@@ -30,6 +25,6 @@ export const SettingsNavigationDrawer = ({
           label={t`Advanced:`}
         />
       </NavigationDrawerFixedContent>
-    </NavigationDrawer>
+    </>
   );
 };

packages/twenty-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twenty-sdk",
-  "version": "0.8.0-canary.6",
+  "version": "0.8.0-canary.7",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/sdk/index.d.ts",

packages/twenty-server/src/engine/core-modules/auth/services/sign-in-up.service.ts

@@ -9,7 +9,6 @@ import { Repository, type DataSource, type QueryRunner } from 'typeorm';
 import { v4 } from 'uuid';
 
 import { USER_SIGNUP_EVENT_NAME } from 'src/engine/api/graphql/workspace-query-runner/constants/user-signup-event-name.constants';
-import { MAX_WORKSPACES_WITHOUT_ENTERPRISE_KEY } from 'src/engine/core-modules/auth/constants/max-workspaces-without-enterprise-key.constants';
 import { type AppTokenEntity } from 'src/engine/core-modules/app-token/app-token.entity';
 import { ApplicationService } from 'src/engine/core-modules/application/application.service';
 import {
@@ -21,6 +20,7 @@ import {
   compareHash,
   hashPassword,
 } from 'src/engine/core-modules/auth/auth.util';
+import { MAX_WORKSPACES_WITHOUT_ENTERPRISE_KEY } from 'src/engine/core-modules/auth/constants/max-workspaces-without-enterprise-key.constants';
 import {
   type AuthProviderWithPasswordType,
   type ExistingUserOrPartialUserWithPicture,
@@ -593,16 +593,18 @@ export class SignInUpService {
       );
 
       await queryRunner.commitTransaction();
-      await this.workspaceCacheService.invalidateAndRecompute(workspaceId, [
-        'flatApplicationMaps',
-      ]);
 
       return { user, workspace };
     } catch (error) {
-      await queryRunner.rollbackTransaction();
+      if (queryRunner.isTransactionActive) {
+        await queryRunner.rollbackTransaction();
+      }
       throw error;
     } finally {
       await queryRunner.release();
+      await this.workspaceCacheService.invalidateAndRecompute(workspaceId, [
+        'flatApplicationMaps',
+      ]);
     }
   }