Add front component skeleton loader (#23261)

Front components (dashboard widget, side panel, settings preview) showed
blank space during their entire load. They now show a shimmering
full-area skeleton continuously, from the lazy chunk load through
metadata fetch, token/SDK wait, and worker boot, until the real UI
mounts.

The skeleton is threaded down as an optional `loadingFallback` prop so
the shared `twenty-front-component-renderer` package stays
dependency-free (react-loading-skeleton stays in twenty-front). The
command-menu headless component opts out by not passing a fallback, so
it stays blank as before.

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/23261?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->

packages/twenty-front/src/modules/front-components/components/FrontComponentRenderer.tsx

@@ -10,7 +10,7 @@ import { useGetLogicFunctionHttpUrl } from '@/settings/logic-functions/hooks/use
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useQuery } from '@apollo/client/react';
 import { t } from '@lingui/core/macro';
-import { useCallback, useContext, useMemo } from 'react';
+import { type ReactNode, useCallback, useContext, useMemo } from 'react';
 import { FrontComponentRenderer as SharedFrontComponentRenderer } from 'twenty-front-component-renderer';
 import { isDefined } from 'twenty-shared/utils';
 import { ThemeContext } from 'twenty-ui/theme-constants';
@@ -25,6 +25,7 @@ type FrontComponentRendererProps = {
   frontComponentId: string;
   commandMenuItemId?: string;
   selectedRecordIds?: string[];
+  loadingFallback?: ReactNode;
 };
 
 type ResolvedFrontComponent = NonNullable<
@@ -35,12 +36,14 @@ type FrontComponentRendererContentProps = {
   frontComponent: ResolvedFrontComponent;
   commandMenuItemId?: string;
   selectedRecordIds?: string[];
+  loadingFallback?: ReactNode;
 };
 
 export const FrontComponentRenderer = ({
   frontComponentId,
   commandMenuItemId,
   selectedRecordIds,
+  loadingFallback,
 }: FrontComponentRendererProps) => {
   const { data, loading, error } = useQuery(FindOneFrontComponentDocument, {
     variables: { id: frontComponentId },
@@ -55,11 +58,13 @@ export const FrontComponentRenderer = ({
   return (
     <>
       <FrontComponentLoadErrorSnackBarEffect errorMessage={error?.message} />
+      {loading && loadingFallback}
       {!loading && isDefined(frontComponent) && (
         <FrontComponentRendererContent
           frontComponent={frontComponent}
           commandMenuItemId={commandMenuItemId}
           selectedRecordIds={selectedRecordIds}
+          loadingFallback={loadingFallback}
         />
       )}
     </>
@@ -70,6 +75,7 @@ const FrontComponentRendererContent = ({
   frontComponent,
   commandMenuItemId,
   selectedRecordIds,
+  loadingFallback,
 }: FrontComponentRendererContentProps) => {
   const { colorScheme } = useContext(ThemeContext);
   const { enqueueErrorSnackBar } = useSnackBar();
@@ -127,6 +133,7 @@ const FrontComponentRendererContent = ({
   const applicationVariables = frontComponent.applicationVariables ?? undefined;
 
   const isSdkClientReady = !usesSdkClient || !sdkClientChecksumsLoading;
+  const isReadyToRender = isDefined(applicationTokenPair) && isSdkClientReady;
 
   return (
     <>
@@ -134,7 +141,8 @@ const FrontComponentRendererContent = ({
         frontComponentId={frontComponentId}
         applicationTokenPair={applicationTokenPair}
       />
-      {isDefined(applicationTokenPair) && isSdkClientReady && (
+      {!isReadyToRender && loadingFallback}
+      {isReadyToRender && (
         <FrontComponentRendererProvider frontComponentId={frontComponentId}>
           <SharedFrontComponentRenderer
             colorScheme={colorScheme}
@@ -151,6 +159,7 @@ const FrontComponentRendererContent = ({
             }
             applicationVariables={applicationVariables}
             onError={handleError}
+            loadingFallback={loadingFallback}
           />
         </FrontComponentRendererProvider>
       )}