houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(admin-panel): inline skeleton loaders for table sections (#20014)

Browse Source 
## Summary
\`SettingsSkeletonLoader\` wraps its content in \`PageHeader\` +
\`PageBody\`, which is right for **full-page replacement** (user detail,
config variable detail, etc.) but renders as a large empty stub with one
tiny floating bar when placed **inline inside a section that's already
scaffolded**. That's what showed up in Recent Users, Top Workspaces, and
the Chats tab in the admin panel — a jarring white page flash where a
few row placeholders should be.

This PR adds \`SettingsAdminSectionSkeletonLoader\` — a small,
configurable-row-count skeleton that uses the project's standard
\`SkeletonTheme\` pattern (\`theme.background.tertiary\` /
\`theme.background.transparent.lighter\` + \`borderRadius: 4\`, matching
\`PageContentSkeletonLoader\` and \`SettingsAdminTabSkeletonLoader\`)
and renders row-height bars that match \`TableRow\` spacing. Swaps it
into the three inline call sites.

Full-page usages of \`SettingsSkeletonLoader\` are unchanged.

### Changed
- **New**:
\`packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminSectionSkeletonLoader.tsx\`
- **Swapped** (3 inline loading states): \`SettingsAdminGeneral.tsx\`
(Recent Users + Top Workspaces), \`SettingsAdminWorkspaceDetail.tsx\`
(Chats tab)

## Test plan
- [x] typecheck (\`npx nx typecheck twenty-front --skip-nx-cache\`) —
clean
- [x] oxlint — 0 warnings
- [x] prettier — clean
- [ ] Visual: navigate to admin panel, observe Recent Users / Top
Workspaces / Chats tab loading — should see a tight stack of row-height
placeholder bars instead of a big empty page stub

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Félix Malfait
2026-04-23 21:58:33 +02:00
committed by GitHub
parent b1838b3090
commit ec98130def
11 changed files with 53 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountLoader.tsx
-16
View File
@@ -1,16 +0,0 @@
import { useContext } from 'react';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { ThemeContext } from 'twenty-ui/theme-constants';
export const SettingsAccountLoader = () => {
const { theme } = useContext(ThemeContext);
return (
<SkeletonTheme
baseColor={theme.background.tertiary}
highlightColor={theme.background.transparent.lighter}
borderRadius={4}
>
<Skeleton height={20} width={512} />
</SkeletonTheme>
);
};
packages/twenty-front/src/modules/settings/admin-panel/ai/components/SettingsAdminAI.tsx
+2 -2
View File
@@ -25,7 +25,7 @@ import { GET_AI_PROVIDERS } from '@/settings/admin-panel/ai/graphql/queries/getA
import { type GetAiProvidersResult } from '@/settings/admin-panel/ai/types/GetAiProvidersResult';
import { parseProviderItems } from '@/settings/admin-panel/ai/utils/parseProviderItems';
import { getModelIcon } from '@/settings/ai/utils/getModelIcon';
import { SettingsAdminTabSkeletonLoader } from '@/settings/admin-panel/components/SettingsAdminTabSkeletonLoader';
import { SettingsSectionSkeletonLoader } from '@/settings/components/SettingsSectionSkeletonLoader';
import { SettingsEnterpriseFeatureGateCard } from '@/settings/components/SettingsEnterpriseFeatureGateCard';
import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsOptions/SettingsOptionCardContentSelect';
import { useUsageValueFormatter } from '@/settings/usage/hooks/useUsageValueFormatter';
@@ -128,7 +128,7 @@ export const SettingsAdminAI = () => {
);
if (isLoadingProviders || isLoadingModels) {
return <SettingsAdminTabSkeletonLoader />;
return <SettingsSectionSkeletonLoader />;
}
const handleRecommendedToggle = async (
packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminGeneral.tsx
+3 -3
View File
@@ -1,9 +1,9 @@
import { canManageFeatureFlagsState } from '@/client-config/states/canManageFeatureFlagsState';
import { useApolloAdminClient } from '@/settings/admin-panel/apollo/hooks/useApolloAdminClient';
import { SettingsSectionSkeletonLoader } from '@/settings/components/SettingsSectionSkeletonLoader';
import { SettingsAdminVersionContainer } from '@/settings/admin-panel/components/SettingsAdminVersionContainer';
import { ADMIN_PANEL_RECENT_USERS } from '@/settings/admin-panel/graphql/queries/adminPanelRecentUsers';
import { ADMIN_PANEL_TOP_WORKSPACES } from '@/settings/admin-panel/graphql/queries/adminPanelTopWorkspaces';
import { SettingsSkeletonLoader } from '@/settings/components/SettingsSkeletonLoader';
import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
import { Table } from '@/ui/layout/table/components/Table';
import { TableBody } from '@/ui/layout/table/components/TableBody';
@@ -105,7 +105,7 @@ export const SettingsAdminGeneral = () => {
fullWidth
/>
{isLoadingUsers ? (
<SettingsSkeletonLoader />
<SettingsSectionSkeletonLoader />
) : recentUsers.length === 0 ? (
<StyledEmptyState>
{t`No users found matching your search criteria.`}
@@ -154,7 +154,7 @@ export const SettingsAdminGeneral = () => {
fullWidth
/>
{isLoadingWorkspaces ? (
<SettingsSkeletonLoader />
<SettingsSectionSkeletonLoader />
) : topWorkspaces.length === 0 ? (
<StyledEmptyState>
{t`No workspaces found matching your search criteria.`}
packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminTabSkeletonLoader.tsx
-18
View File
@@ -1,18 +0,0 @@
import { useContext } from 'react';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
import { ThemeContext } from 'twenty-ui/theme-constants';
export const SettingsAdminTabSkeletonLoader = () => {
const { theme } = useContext(ThemeContext);
return (
<SkeletonTheme
baseColor={theme.background.tertiary}
highlightColor={theme.background.transparent.lighter}
borderRadius={4}
>
<Skeleton height={SKELETON_LOADER_HEIGHT_SIZES.standard.m} width={120} />
</SkeletonTheme>
);
};
packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigVariables.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import { SettingsAdminTabSkeletonLoader } from '@/settings/admin-panel/components/SettingsAdminTabSkeletonLoader';
import { SettingsSectionSkeletonLoader } from '@/settings/components/SettingsSectionSkeletonLoader';
import { useApolloAdminClient } from '@/settings/admin-panel/apollo/hooks/useApolloAdminClient';
import { ConfigVariableFilterContainer } from '@/settings/admin-panel/config-variables/components/ConfigVariableFilterContainer';
import { ConfigVariableFilterDropdown } from '@/settings/admin-panel/config-variables/components/ConfigVariableFilterDropdown';
@@ -160,7 +160,7 @@ export const SettingsAdminConfigVariables = () => {
}, [filteredVariables, allGroups]);
if (configVariablesLoading) {
return <SettingsAdminTabSkeletonLoader />;
return <SettingsSectionSkeletonLoader />;
}
return (
packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthStatus.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { useApolloAdminClient } from '@/settings/admin-panel/apollo/hooks/useApolloAdminClient';
import { SettingsAdminTabSkeletonLoader } from '@/settings/admin-panel/components/SettingsAdminTabSkeletonLoader';
import { SettingsSectionSkeletonLoader } from '@/settings/components/SettingsSectionSkeletonLoader';
import { SettingsAdminHealthStatusListCard } from '@/settings/admin-panel/health-status/components/SettingsAdminHealthStatusListCard';
import { SettingsAdminMaintenanceModeFetchEffect } from '@/settings/admin-panel/health-status/maintenance-mode/components/SettingsAdminMaintenanceModeFetchEffect';
import { SettingsAdminMaintenanceMode } from '@/settings/admin-panel/health-status/maintenance-mode/components/SettingsAdminMaintenanceMode';
@@ -22,7 +22,7 @@ export const SettingsAdminHealthStatus = () => {
const services = data?.getSystemHealthStatus.services ?? [];
if (loadingHealthStatus) {
return <SettingsAdminTabSkeletonLoader />;
return <SettingsSectionSkeletonLoader />;
}
return (
packages/twenty-front/src/modules/settings/components/SettingsSectionSkeletonLoader.tsx
+38
View File
@@ -0,0 +1,38 @@
import { styled } from '@linaria/react';
import { useContext } from 'react';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
type SettingsSectionSkeletonLoaderProps = {
rowCount?: number;
};
const StyledRows = styled.div`
display: flex;
flex-direction: column;
gap: ${themeCssVariables.spacing[2]};
width: 100%;
`;
export const SettingsSectionSkeletonLoader = ({
rowCount = 4,
}: SettingsSectionSkeletonLoaderProps) => {
const { theme } = useContext(ThemeContext);
return (
<StyledRows>
<SkeletonTheme
baseColor={theme.background.tertiary}
highlightColor={theme.background.transparent.lighter}
borderRadius={4}
>
<Skeleton
count={rowCount}
height={SKELETON_LOADER_HEIGHT_SIZES.standard.l}
/>
</SkeletonTheme>
</StyledRows>
);
};
packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { SettingsPath } from 'twenty-shared/types';
import { SettingsAccountLoader } from '@/settings/accounts/components/SettingsAccountLoader';
import { SettingsSectionSkeletonLoader } from '@/settings/components/SettingsSectionSkeletonLoader';
import { SettingsAccountsBlocklistSection } from '@/settings/accounts/components/SettingsAccountsBlocklistSection';
import { SettingsAccountsConnectedAccountsListCard } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsListCard';
import { SettingsAccountsSettingsSection } from '@/settings/accounts/components/SettingsAccountsSettingsSection';
@@ -29,7 +29,7 @@ export const SettingsAccounts = () => {
>
<SettingsPageContainer>
{loading ? (
<SettingsAccountLoader />
<SettingsSectionSkeletonLoader />
) : (
<>
<Section>
packages/twenty-front/src/pages/settings/admin-panel/SettingsAdminWorkspaceDetail.tsx
+2 -1
View File
@@ -10,6 +10,7 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { canManageFeatureFlagsState } from '@/client-config/states/canManageFeatureFlagsState';
import { AI_ADMIN_PATH } from '@/settings/admin-panel/ai/constants/AiAdminPath';
import { useApolloAdminClient } from '@/settings/admin-panel/apollo/hooks/useApolloAdminClient';
import { SettingsSectionSkeletonLoader } from '@/settings/components/SettingsSectionSkeletonLoader';
import { SettingsAdminWorkspaceContent } from '@/settings/admin-panel/components/SettingsAdminWorkspaceContent';
import { GET_ADMIN_WORKSPACE_CHAT_THREADS } from '@/settings/admin-panel/graphql/queries/getAdminWorkspaceChatThreads';
import { WORKSPACE_LOOKUP_ADMIN_PANEL } from '@/settings/admin-panel/graphql/queries/workspaceLookupAdminPanel';
@@ -304,7 +305,7 @@ export const SettingsAdminWorkspaceDetail = () => {
description={t`AI chat threads for this workspace`}
/>
{isLoadingThreads ? (
<SettingsSkeletonLoader />
<SettingsSectionSkeletonLoader />
) : threads.length === 0 ? (
<Card rounded>
<TableRow gridTemplateColumns="1fr">
packages/twenty-front/src/pages/settings/applications/SettingsApplicationDetails.tsx
+2 -2
View File
@@ -40,7 +40,7 @@ import {
UninstallApplicationDocument,
} from '~/generated-metadata/graphql';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
import { SettingsApplicationDetailSkeletonLoader } from '~/pages/settings/applications/components/SettingsApplicationDetailSkeletonLoader';
import { SettingsSectionSkeletonLoader } from '@/settings/components/SettingsSectionSkeletonLoader';
import { SettingsApplicationDetailTitle } from '~/pages/settings/applications/components/SettingsApplicationDetailTitle';
import { CUSTOM_APPLICATION_ILLUSTRATIONS } from '~/pages/settings/applications/constants/CustomApplicationIllustrations';
import { STANDARD_APPLICATION_ILLUSTRATIONS } from '~/pages/settings/applications/constants/StandardApplicationIllustrations';
@@ -241,7 +241,7 @@ export const SettingsApplicationDetails = () => {
const renderActiveTabContent = () => {
if (!isDefined(application)) {
return <SettingsApplicationDetailSkeletonLoader />;
return <SettingsSectionSkeletonLoader />;
}
switch (activeTabId) {
packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDetailSkeletonLoader.tsx
-53
View File
@@ -1,53 +0,0 @@
import { styled } from '@linaria/react';
import { useContext } from 'react';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
const StyledSkeletonContainer = styled.div`
display: flex;
flex-direction: column;
gap: ${themeCssVariables.spacing[8]};
`;
const StyledFormSection = styled.div`
display: flex;
flex-direction: column;
gap: ${themeCssVariables.spacing[2]};
`;
export const SettingsApplicationDetailSkeletonLoader = () => {
const { theme } = useContext(ThemeContext);
return (
<SkeletonTheme
baseColor={theme.background.tertiary}
highlightColor={theme.background.transparent.lighter}
borderRadius={4}
>
<StyledSkeletonContainer>
<StyledFormSection>
<Skeleton
height={SKELETON_LOADER_HEIGHT_SIZES.standard.l}
width="100%"
/>
<Skeleton
height={SKELETON_LOADER_HEIGHT_SIZES.standard.l}
width="100%"
/>
<Skeleton
height={SKELETON_LOADER_HEIGHT_SIZES.standard.l}
width="100%"
/>
<Skeleton
height={SKELETON_LOADER_HEIGHT_SIZES.standard.l}
width="100%"
/>
</StyledFormSection>
</StyledSkeletonContainer>
</SkeletonTheme>
);
};