refactor(button): rename loading to isLoading for clarity (#11058)

Updated all instances of the loading prop to isLoading across Button and
related components. This improves readability and ensures consistency in
the codebase.

packages/twenty-front/src/pages/settings/workspace/SettingsCustomDomain.tsx

@@ -29,13 +29,13 @@ const StyledRecordsWrapper = styled.div`
 `;
 
 export const SettingsCustomDomain = () => {
-  const { customDomainRecords, loading } = useRecoilValue(
+  const { customDomainRecords, isLoading } = useRecoilValue(
     customDomainRecordsState,
   );
 
   const { checkCustomDomainRecords } = useCheckCustomDomainValidRecords();
 
-  if (!customDomainRecords && !loading) {
+  if (!customDomainRecords && !isLoading) {
     checkCustomDomainRecords();
   }
 
@@ -69,7 +69,7 @@ export const SettingsCustomDomain = () => {
           )}
         />
         <StyledButton
-          loading={loading}
+          isLoading={isLoading}
           Icon={IconReload}
           title={t`Reload`}
           variant="primary"

packages/twenty-front/src/pages/settings/workspace/hooks/useCheckCustomDomainValidRecords.ts

@@ -12,13 +12,13 @@ export const useCheckCustomDomainValidRecords = () => {
   const checkCustomDomainRecords = () => {
     setCustomDomainRecords((currentState) => ({
       ...currentState,
-      loading: true,
+      isLoading: true,
     }));
     checkCustomDomainValidRecords({
       onCompleted: (data) => {
         if (isDefined(data.checkCustomDomainValidRecords)) {
           setCustomDomainRecords({
-            loading: false,
+            isLoading: false,
             customDomainRecords: data.checkCustomDomainValidRecords,
           });
         }

packages/twenty-front/src/pages/settings/workspace/states/customDomainRecordsState.ts

@@ -3,8 +3,8 @@ import { CustomDomainValidRecords } from '~/generated/graphql';
 
 export const customDomainRecordsState = createState<{
   customDomainRecords: CustomDomainValidRecords | null;
-  loading: boolean;
+  isLoading: boolean;
 }>({
   key: 'customDomainRecordsState',
-  defaultValue: { loading: false, customDomainRecords: null },
+  defaultValue: { isLoading: false, customDomainRecords: null },
 });

packages/twenty-ui/src/input/button/components/Button/Button.tsx

@@ -35,7 +35,7 @@ export type ButtonProps = {
   dataTestId?: string;
   hotkeys?: string[];
   ariaLabel?: string;
-  loading?: boolean;
+  isLoading?: boolean;
 } & React.ComponentProps<'button'>;
 
 const StyledButton = styled('button', {
@@ -54,7 +54,7 @@ const StyledButton = styled('button', {
     | 'justify'
     | 'to'
     | 'target'
-    | 'loading'
+    | 'isLoading'
   > & { hasIcon: boolean }
 >`
   align-items: center;
@@ -359,7 +359,10 @@ const StyledButton = styled('button', {
 `;
 
 const StyledButtonWrapper = styled.div<
-  Pick<ButtonProps, 'loading' | 'variant' | 'accent' | 'inverted' | 'disabled'>
+  Pick<
+    ButtonProps,
+    'isLoading' | 'variant' | 'accent' | 'inverted' | 'disabled'
+  >
 >`
   ${({ theme, variant, accent, inverted, disabled }) => css`
     --tw-button-color: ${(() => {
@@ -404,8 +407,8 @@ const StyledButtonWrapper = styled.div<
     })()};
   `}
 
-  max-width: ${({ loading, theme }) =>
+  max-width: ${({ isLoading, theme }) =>
-    loading ? `calc(100% - ${theme.spacing(8)})` : 'none'};
+    isLoading ? `calc(100% - ${theme.spacing(8)})` : 'none'};
   position: relative;
 `;
 
@@ -430,21 +433,22 @@ export const Button = ({
   hotkeys,
   ariaLabel,
   type,
-  loading,
+  isLoading,
 }: ButtonProps) => {
   const isMobile = useIsMobile();
 
   const [isFocused, setIsFocused] = useState(propFocus);
-
   return (
     <StyledButtonWrapper
-      loading={loading}
+      isLoading={!!isLoading}
       variant={variant}
       accent={accent}
       inverted={inverted}
       disabled={soon || disabled}
     >
-      {(loading || Icon) && <ButtonIcon Icon={Icon} loading={loading} />}
+      {(isLoading || Icon) && (
+        <ButtonIcon Icon={Icon} isLoading={!!isLoading} />
+      )}
       <StyledButton
         fullWidth={fullWidth}
         variant={variant}
@@ -463,12 +467,12 @@ export const Button = ({
         data-testid={dataTestId}
         aria-label={ariaLabel}
         type={type}
-        loading={loading}
+        isLoading={isLoading}
         onFocus={() => setIsFocused(true)}
         onBlur={() => setIsFocused(false)}
         size={size}
       >
-        <ButtonText hasIcon={!!Icon} title={title} loading={loading} />
+        <ButtonText hasIcon={!!Icon} title={title} isLoading={isLoading} />
         {hotkeys && !isMobile && (
           <ButtonHotkeys
             hotkeys={hotkeys}

packages/twenty-ui/src/input/button/components/Button/internal/ButtonIcon.tsx

@@ -6,7 +6,7 @@ import styled from '@emotion/styled';
 import { isDefined } from 'twenty-shared';
 
 const StyledIcon = styled.div<{
-  loading?: boolean;
+  isLoading: boolean;
 }>`
   align-items: center;
   display: flex;
@@ -15,13 +15,13 @@ const StyledIcon = styled.div<{
 
   padding: 8px;
 
-  opacity: ${({ loading }) => (loading ? 0 : 1)};
+  opacity: ${({ isLoading }) => (isLoading ? 0 : 1)};
   transition: opacity ${baseTransitionTiming / 2}ms ease;
-  transition-delay: ${({ loading }) =>
+  transition-delay: ${({ isLoading }) =>
-    loading ? '0ms' : `${baseTransitionTiming / 2}ms`};
+    isLoading ? '0ms' : `${baseTransitionTiming / 2}ms`};
 `;
 
-const StyledIconWrapper = styled.div<{ loading?: boolean }>`
+const StyledIconWrapper = styled.div<{ isLoading: boolean }>`
   align-items: center;
   display: flex;
   height: 100%;
@@ -30,39 +30,39 @@ const StyledIconWrapper = styled.div<{ loading?: boolean }>`
   top: 50%;
   transform: translateY(-50%);
 
-  width: ${({ loading }) => (loading ? 0 : '100%')};
+  width: ${({ isLoading }) => (isLoading ? 0 : '100%')};
 
   pointer-events: none;
 `;
 
-const StyledLoader = styled.div<{ loading?: boolean }>`
+const StyledLoader = styled.div<{ isLoading: boolean }>`
   left: ${({ theme }) => theme.spacing(2)};
-  opacity: ${({ loading }) => (loading ? 1 : 0)};
+  opacity: ${({ isLoading }) => (isLoading ? 1 : 0)};
   position: absolute;
 
   transition: opacity ${baseTransitionTiming / 2}ms ease;
-  transition-delay: ${({ loading }) =>
+  transition-delay: ${({ isLoading }) =>
-    loading ? `${baseTransitionTiming / 2}ms` : '0ms'};
+    isLoading ? `${baseTransitionTiming / 2}ms` : '0ms'};
   width: ${({ theme }) => theme.spacing(6)};
 `;
 
 export const ButtonIcon = ({
   Icon,
-  loading,
+  isLoading,
 }: {
   Icon?: IconComponent;
-  loading?: boolean;
+  isLoading?: boolean;
 }) => {
   const theme = useTheme();
   return (
-    <StyledIconWrapper loading={loading}>
+    <StyledIconWrapper isLoading={!!isLoading}>
-      {isDefined(loading) && (
+      {isDefined(isLoading) && (
-        <StyledLoader loading={loading}>
+        <StyledLoader isLoading={isLoading}>
           <Loader />
         </StyledLoader>
       )}
       {Icon && (
-        <StyledIcon loading={loading}>
+        <StyledIcon isLoading={!!isLoading}>
           <Icon size={theme.icon.size.sm} />
         </StyledIcon>
       )}

packages/twenty-ui/src/input/button/components/Button/internal/ButtonText.tsx

@@ -1,10 +1,10 @@
 import styled from '@emotion/styled';
 import { baseTransitionTiming } from '@ui/input/button/components/Button/constant';
 
-const StyledEllipsis = styled.div<{ loading?: boolean }>`
+const StyledEllipsis = styled.div<{ isLoading?: boolean }>`
   right: 0;
-  clip-path: ${({ theme, loading }) =>
+  clip-path: ${({ theme, isLoading }) =>
-    loading ? `inset(0 0 0 0)` : `inset(0 0 0 ${theme.spacing(6)})`};
+    isLoading ? `inset(0 0 0 0)` : `inset(0 0 0 ${theme.spacing(6)})`};
   overflow: hidden;
   position: absolute;
 
@@ -19,16 +19,16 @@ const StyledTextWrapper = styled.div`
   position: relative;
 `;
 
-const StyledText = styled.div<{ loading?: boolean; hasIcon: boolean }>`
+const StyledText = styled.div<{ isLoading?: boolean; hasIcon: boolean }>`
-  clip-path: ${({ loading, theme, hasIcon }) =>
+  clip-path: ${({ isLoading, theme, hasIcon }) =>
-    loading
+    isLoading
       ? ` inset(0 ${!hasIcon ? theme.spacing(12) : theme.spacing(6)} 0 0)`
       : ' inset(0 0 0 0)'};
 
   overflow: hidden;
 
-  transform: ${({ theme, loading, hasIcon }) =>
+  transform: ${({ theme, isLoading, hasIcon }) =>
-    loading
+    isLoading
       ? `translateX(${!hasIcon ? theme.spacing(7) : theme.spacing(3)})`
       : 'none'};
 
@@ -36,24 +36,24 @@ const StyledText = styled.div<{ loading?: boolean; hasIcon: boolean }>`
     transform ${baseTransitionTiming}ms ease,
     clip-path ${baseTransitionTiming}ms ease;
 
-  transition-delay: ${({ loading }) =>
+  transition-delay: ${({ isLoading }) =>
-    loading ? '0ms' : `${baseTransitionTiming / 4}ms`};
+    isLoading ? '0ms' : `${baseTransitionTiming / 4}ms`};
   white-space: nowrap;
 `;
 
 export const ButtonText = ({
   hasIcon = false,
-  loading,
+  isLoading,
   title,
 }: {
-  loading?: boolean;
+  isLoading?: boolean;
   hasIcon: boolean;
   title?: string;
 }) => (
   <StyledTextWrapper>
-    <StyledText loading={loading} hasIcon={hasIcon}>
+    <StyledText isLoading={isLoading} hasIcon={hasIcon}>
       {title}
     </StyledText>
-    <StyledEllipsis loading={loading}>...</StyledEllipsis>
+    <StyledEllipsis isLoading={isLoading}>...</StyledEllipsis>
   </StyledTextWrapper>
 );

packages/twenty-ui/src/input/button/components/__stories__/Button.stories.tsx

@@ -39,7 +39,7 @@ export const Default: Story = {
     position: 'standalone',
     Icon: IconSearch,
     className: '',
-    loading: false,
+    isLoading: false,
   },
   decorators: [ComponentDecorator],
 };
@@ -56,7 +56,7 @@ export const Catalog: CatalogStory<Story, typeof Button> = {
     soon: { control: false },
     position: { control: false },
     className: { control: false },
-    loading: { control: false },
+    isLoading: { control: false },
   },
   parameters: {
     pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
@@ -329,7 +329,7 @@ export const LoadingButton: Story = {
   args: {
     title: 'Reload',
     Icon: IconReload,
-    loading: true,
+    isLoading: true,
   },
   argTypes: {
     size: { control: false },
@@ -341,15 +341,15 @@ export const LoadingButton: Story = {
     soon: { control: false },
     position: { control: false },
     className: { control: false },
-    loading: { control: 'boolean' },
+    isLoading: { control: 'boolean' },
   },
   parameters: {
     catalog: {
-      loading: [
+      isLoading: [
         {
-          name: 'loading',
+          name: 'isLoading',
           values: [true, false] satisfies boolean[],
-          props: (value: boolean) => ({ loading: value }),
+          props: (value: boolean) => ({ isLoading: value }),
         },
       ],
     },