Improve performance of demo workspace - Rename `getImageAbsoluteURIO…

…rBase64` function
twentyhq · Jul 17, 2024 · c51c3a3 · c51c3a3
1 parent efd932e
commit c51c3a3
Show file tree

Hide file tree

Showing 26 changed files with 70 additions and 78 deletions.
diff --git a/packages/twenty-emails/src/emails/send-invite-link.email.tsx b/packages/twenty-emails/src/emails/send-invite-link.email.tsx
@@ -9,7 +9,7 @@ import { MainText } from 'src/components/MainText';
 import { Title } from 'src/components/Title';
 import { WhatIsTwenty } from 'src/components/WhatIsTwenty';
 import { capitalize } from 'src/utils/capitalize';
-import { getImageAbsoluteURIOrBase64 } from 'src/utils/getImageAbsoluteURIOrBase64';
+import { getImageAbsoluteURI } from 'src/utils/getImageAbsoluteURI';
 
 type SendInviteLinkEmailProps = {
   link: string;
@@ -27,7 +27,7 @@ export const SendInviteLinkEmail = ({
   sender,
   serverUrl,
 }: SendInviteLinkEmailProps) => {
-  const workspaceLogo = getImageAbsoluteURIOrBase64(workspace.logo, serverUrl);
+  const workspaceLogo = getImageAbsoluteURI(workspace.logo, serverUrl);
   return (
     <BaseEmail width={333}>
       <Title value="Join your team on Twenty" />

diff --git a/.../src/utils/getImageAbsoluteURIOrBase64.ts → ...y-emails/src/utils/getImageAbsoluteURI.ts b/.../src/utils/getImageAbsoluteURIOrBase64.ts → ...y-emails/src/utils/getImageAbsoluteURI.ts
@@ -1,12 +1,12 @@
-export const getImageAbsoluteURIOrBase64 = (
+export const getImageAbsoluteURI = (
   imageUrl?: string | null,
   serverUrl?: string,
 ) => {
   if (!imageUrl) {
     return null;
   }
 
-  if (imageUrl?.startsWith('data:') || imageUrl?.startsWith('https:')) {
+  if (imageUrl?.startsWith('https:')) {
     return imageUrl;
   }
 

diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx
@@ -16,7 +16,7 @@ import { Card } from '@/ui/layout/card/components/Card';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { TimelineCalendarEvent } from '~/generated-metadata/graphql';
 import { CalendarChannelVisibility } from '~/generated/graphql';
-import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
+import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 import { isDefined } from '~/utils/isDefined';
 
 type CalendarEventRowProps = {
@@ -163,7 +163,7 @@ export const CalendarEventRow = ({
               key={[participant.workspaceMemberId, participant.displayName]
                 .filter(isDefined)
                 .join('-')}
-              avatarUrl={getImageAbsoluteURIOrBase64(participant.avatarUrl)}
+              avatarUrl={getImageAbsoluteURI(participant.avatarUrl)}
               placeholder={
                 participant.firstName && participant.lastName
                   ? `${participant.firstName} ${participant.lastName}`

diff --git a/packages/twenty-front/src/modules/activities/comment/CommentHeader.tsx b/packages/twenty-front/src/modules/activities/comment/CommentHeader.tsx
@@ -6,7 +6,7 @@ import {
   beautifyExactDateTime,
   beautifyPastDateRelativeToNow,
 } from '~/utils/date-utils';
-import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
+import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 const StyledContainer = styled.div`
   align-items: center;
@@ -60,7 +60,7 @@ export const CommentHeader = ({ comment, actionBar }: CommentHeaderProps) => {
     <StyledContainer>
       <StyledLeftContainer>
         <Avatar
-          avatarUrl={getImageAbsoluteURIOrBase64(avatarUrl)}
+          avatarUrl={getImageAbsoluteURI(avatarUrl)}
           size="md"
           placeholderColorSeed={author?.id}
           placeholder={authorName}

diff --git a/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx b/packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx
@@ -4,7 +4,7 @@ import { Avatar } from 'twenty-ui';
 import { getDisplayNameFromParticipant } from '@/activities/emails/utils/getDisplayNameFromParticipant';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { RecordChip } from '@/object-record/components/RecordChip';
-import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
+import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 const StyledAvatar = styled(Avatar)`
   margin-right: ${({ theme }) => theme.spacing(1)};
@@ -73,7 +73,7 @@ export const ParticipantChip = ({
       ) : (
         <StyledChip>
           <StyledAvatar
-            avatarUrl={getImageAbsoluteURIOrBase64(avatarUrl)}
+            avatarUrl={getImageAbsoluteURI(avatarUrl)}
             type="rounded"
             placeholder={displayName}
             size="sm"

diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx
@@ -10,7 +10,7 @@ import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 import { MessageChannelVisibility, TimelineThread } from '~/generated/graphql';
 import { formatToHumanReadableDate } from '~/utils/date-utils';
-import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
+import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 const StyledCardContent = styled(CardContent)<{
   visibility: MessageChannelVisibility;
@@ -154,15 +154,13 @@ export const EmailThreadPreview = ({
       <StyledHeading unread={!thread.read}>
         <StyledParticipantsContainer>
           <Avatar
-            avatarUrl={getImageAbsoluteURIOrBase64(
-              thread?.firstParticipant?.avatarUrl,
-            )}
+            avatarUrl={getImageAbsoluteURI(thread?.firstParticipant?.avatarUrl)}
             placeholder={thread.firstParticipant.displayName}
             type="rounded"
           />
           {thread?.lastTwoParticipants?.[0] && (
             <StyledAvatar
-              avatarUrl={getImageAbsoluteURIOrBase64(
+              avatarUrl={getImageAbsoluteURI(
                 thread.lastTwoParticipants[0].avatarUrl,
               )}
               placeholder={thread.lastTwoParticipants[0].displayName}
@@ -171,7 +169,7 @@ export const EmailThreadPreview = ({
           )}
           {finalDisplayedName && (
             <StyledAvatar
-              avatarUrl={getImageAbsoluteURIOrBase64(finalAvatarUrl)}
+              avatarUrl={getImageAbsoluteURI(finalAvatarUrl)}
               placeholder={finalDisplayedName}
               type="rounded"
               color={isCountIcon ? GRAY_SCALE.gray50 : undefined}

diff --git a/packages/twenty-front/src/modules/activities/timeline/components/TimelineActivity.tsx b/packages/twenty-front/src/modules/activities/timeline/components/TimelineActivity.tsx
@@ -11,7 +11,7 @@ import {
   beautifyExactDateTime,
   beautifyPastDateRelativeToNow,
 } from '~/utils/date-utils';
-import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
+import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 const StyledAvatarContainer = styled.div`
   align-items: center;
@@ -154,7 +154,7 @@ export const TimelineActivity = ({
       <StyledTimelineItemContainer>
         <StyledAvatarContainer>
           <Avatar
-            avatarUrl={getImageAbsoluteURIOrBase64(
+            avatarUrl={getImageAbsoluteURI(
               activityForTimeline.author?.avatarUrl,
             )}
             placeholder={activityForTimeline.author?.name.firstName ?? ''}

diff --git a/packages/twenty-front/src/modules/auth/components/Logo.tsx b/packages/twenty-front/src/modules/auth/components/Logo.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
+import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 type LogoProps = {
   workspaceLogo?: string | null;
@@ -58,7 +58,7 @@ export const Logo = ({ workspaceLogo }: LogoProps) => {
 
   return (
     <StyledContainer>
-      <StyledMainLogo logo={getImageAbsoluteURIOrBase64(workspaceLogo)} />
+      <StyledMainLogo logo={getImageAbsoluteURI(workspaceLogo)} />
       <StyledTwentyLogoContainer>
         <StyledTwentyLogo src="/icons/android/android-launchericon-192-192.png" />
       </StyledTwentyLogoContainer>

diff --git a/packages/twenty-front/src/modules/favorites/components/Favorites.tsx b/packages/twenty-front/src/modules/favorites/components/Favorites.tsx
@@ -10,7 +10,7 @@ import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/componen
 import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
 import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
 import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection';
-import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
+import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 import { useFavorites } from '../hooks/useFavorites';
 
@@ -81,7 +81,7 @@ export const Favorites = () => {
                         Icon={() => (
                           <StyledAvatar
                             placeholderColorSeed={recordId}
-                            avatarUrl={getImageAbsoluteURIOrBase64(avatarUrl)}
+                            avatarUrl={getImageAbsoluteURI(avatarUrl)}
                             type={avatarType}
                             placeholder={labelIdentifier}
                             className="fav-avatar"

diff --git a/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx b/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx
@@ -11,7 +11,7 @@ import {
 } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
 import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
+import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 import { useIsSettingsPage } from '../hooks/useIsSettingsPage';
 import { currentMobileNavigationDrawerState } from '../states/currentMobileNavigationDrawerState';
@@ -49,7 +49,7 @@ export const AppNavigationDrawer = ({
     : {
         logo:
           (currentWorkspace?.logo &&
-            getImageAbsoluteURIOrBase64(currentWorkspace.logo)) ??
+            getImageAbsoluteURI(currentWorkspace.logo)) ??
           undefined,
         title: currentWorkspace?.displayName ?? undefined,
         children: <MainNavigationDrawerItems />,

diff --git a/packages/twenty-front/src/modules/object-metadata/utils/getAvatarUrl.ts b/packages/twenty-front/src/modules/object-metadata/utils/getAvatarUrl.ts
@@ -2,7 +2,7 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { getLogoUrlFromDomainName } from '~/utils';
-import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
+import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 import { isDefined } from '~/utils/isDefined';
 
 import { getImageIdentifierFieldValue } from './getImageIdentifierFieldValue';
@@ -21,7 +21,7 @@ export const getAvatarUrl = (
   }
 
   if (objectNameSingular === CoreObjectNameSingular.Person) {
-    return getImageAbsoluteURIOrBase64(record.avatarUrl) ?? '';
+    return getImageAbsoluteURI(record.avatarUrl) ?? '';
   }
 
   const imageIdentifierFieldValue = getImageIdentifierFieldValue(

diff --git a/...t/src/modules/object-record/object-filter-dropdown/components/GenericEntityFilterChip.tsx b/...t/src/modules/object-record/object-filter-dropdown/components/GenericEntityFilterChip.tsx
@@ -1,6 +1,6 @@
 import { AvatarChip, IconComponent } from 'twenty-ui';
 
-import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
+import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 import { Filter } from '../types/Filter';
 
@@ -17,7 +17,7 @@ export const GenericEntityFilterChip = ({
     placeholderColorSeed={filter.value}
     name={filter.displayValue}
     avatarType="rounded"
-    avatarUrl={getImageAbsoluteURIOrBase64(filter.displayAvatarUrl) || ''}
+    avatarUrl={getImageAbsoluteURI(filter.displayAvatarUrl) || ''}
     LeftIcon={Icon}
   />
 );
diff --git a/...t/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx b/...t/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx
@@ -10,7 +10,7 @@ import { SelectableItem } from '@/ui/layout/selectable-list/components/Selectabl
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { MenuItemMultiSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar';
 import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
-import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
+import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 import { isDefined } from '~/utils/isDefined';
 
 export const StyledSelectableItem = styled(SelectableItem)`
@@ -65,7 +65,7 @@ export const MultipleObjectRecordSelectItem = ({
         selected={selected}
         avatar={
           <Avatar
-            avatarUrl={getImageAbsoluteURIOrBase64(recordIdentifier.avatarUrl)}
+            avatarUrl={getImageAbsoluteURI(recordIdentifier.avatarUrl)}
             placeholderColorSeed={objectRecordId}
             placeholder={recordIdentifier.name}
             size="md"

diff --git a/...y-front/src/modules/object-record/relation-picker/components/SelectableMenuItemSelect.tsx b/...y-front/src/modules/object-record/relation-picker/components/SelectableMenuItemSelect.tsx
@@ -6,7 +6,7 @@ import { EntityForSelect } from '@/object-record/relation-picker/types/EntityFor
 import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { MenuItemSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemSelectAvatar';
-import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
+import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 type SelectableMenuItemSelectProps = {
   entity: EntityForSelect;
@@ -40,7 +40,7 @@ export const SelectableMenuItemSelect = ({
         hovered={isSelectedItemId}
         avatar={
           <Avatar
-            avatarUrl={getImageAbsoluteURIOrBase64(entity.avatarUrl)}
+            avatarUrl={getImageAbsoluteURI(entity.avatarUrl)}
             placeholderColorSeed={entity.id}
             placeholder={entity.name}
             size="md"

diff --git a/...twenty-front/src/modules/object-record/select/components/MultipleRecordSelectDropdown.tsx b/...twenty-front/src/modules/object-record/select/components/MultipleRecordSelectDropdown.tsx
@@ -6,7 +6,7 @@ import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemMultiSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar';
-import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
+import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 export const MultipleRecordSelectDropdown = ({
   recordsToSelect,
@@ -69,7 +69,7 @@ export const MultipleRecordSelectDropdown = ({
           }
           avatar={
             <Avatar
-              avatarUrl={getImageAbsoluteURIOrBase64(record.avatarUrl)}
+              avatarUrl={getImageAbsoluteURI(record.avatarUrl)}
               placeholderColorSeed={record.id}
               placeholder={record.name}
               size="md"

diff --git a/packages/twenty-front/src/modules/settings/profile/components/ProfilePictureUploader.tsx b/packages/twenty-front/src/modules/settings/profile/components/ProfilePictureUploader.tsx
@@ -6,7 +6,7 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { ImageInput } from '@/ui/input/components/ImageInput';
 import { useUploadProfilePictureMutation } from '~/generated/graphql';
-import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
+import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 import { isDefined } from '~/utils/isDefined';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
@@ -101,7 +101,7 @@ export const ProfilePictureUploader = () => {
 
   return (
     <ImageInput
-      picture={getImageAbsoluteURIOrBase64(currentWorkspaceMember?.avatarUrl)}
+      picture={getImageAbsoluteURI(currentWorkspaceMember?.avatarUrl)}
       onUpload={handleUpload}
       onRemove={handleRemove}
       onAbort={handleAbort}

diff --git a/packages/twenty-front/src/modules/settings/workspace/components/WorkspaceLogoUploader.tsx b/packages/twenty-front/src/modules/settings/workspace/components/WorkspaceLogoUploader.tsx
@@ -6,7 +6,7 @@ import {
   useUpdateWorkspaceMutation,
   useUploadWorkspaceLogoMutation,
 } from '~/generated/graphql';
-import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
+import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
 export const WorkspaceLogoUploader = () => {
@@ -57,7 +57,7 @@ export const WorkspaceLogoUploader = () => {
 
   return (
     <ImageInput
-      picture={getImageAbsoluteURIOrBase64(currentWorkspace?.logo)}
+      picture={getImageAbsoluteURI(currentWorkspace?.logo)}
       onUpload={onUpload}
       onRemove={onRemove}
     />

diff --git a/...t/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx b/...t/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx
@@ -14,7 +14,7 @@ import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/consta
 import { MULTI_WORKSPACE_DROPDOWN_ID } from '@/ui/navigation/navigation-drawer/constants/MulitWorkspaceDropdownId';
 import { useWorkspaceSwitching } from '@/ui/navigation/navigation-drawer/hooks/useWorkspaceSwitching';
 import { NavigationDrawerHotKeyScope } from '@/ui/navigation/navigation-drawer/types/NavigationDrawerHotKeyScope';
-import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
+import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 const StyledLogo = styled.div<{ logo: string }>`
   background: url(${({ logo }) => logo});
@@ -88,7 +88,7 @@ export const MultiWorkspaceDropdownButton = ({
         <StyledContainer>
           <StyledLogo
             logo={
-              getImageAbsoluteURIOrBase64(
+              getImageAbsoluteURI(
                 currentWorkspace?.logo === null
                   ? DEFAULT_WORKSPACE_LOGO
                   : currentWorkspace?.logo,
@@ -111,7 +111,7 @@ export const MultiWorkspaceDropdownButton = ({
               avatar={
                 <StyledLogo
                   logo={
-                    getImageAbsoluteURIOrBase64(
+                    getImageAbsoluteURI(
                       workspace.logo === null
                         ? DEFAULT_WORKSPACE_LOGO
                         : workspace.logo,

diff --git a/...wenty-front/src/modules/ui/navigation/navigation-drawer/constants/DefaultWorkspaceLogo.ts b/...wenty-front/src/modules/ui/navigation/navigation-drawer/constants/DefaultWorkspaceLogo.ts
@@ -1,2 +1,2 @@
 export const DEFAULT_WORKSPACE_LOGO =
-  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAACb0lEQVR4nO2VO4taQRTHr3AblbjxEVlwCwVhg7BoqqCIjy/gAyyFWNlYBOxsfH0KuxgQGwXRUkGuL2S7i1barGAgiwbdW93SnGOc4BonPiKahf3DwXFmuP/fPM4ZlvmlTxAhCBdzHnEQWYiv7Mr4C3NeuVYhQYDPzOUUQgDLBQGcLHNhvQK8DACPx8PTxiqVyvISG43GbyaT6Qfpn06n0m63e/tPAPF4vJ1MJu8kEsnWTCkWi1yr1RKGw+GDRqPBOTfr44vFQvD7/Q/lcpmaaVQAr9fLp1IpO22c47hGOBz+MB6PH+Vy+VYDAL8qlUoGtVotzOfzq4MAgsHgE/6KojiQyWR/bKVSqbSszHFM8Pl8z1YK48JsNltCOBwOnrYLO+8AAIjb+nHbycoTiUQfDJ7tFq4YAHiVSmXBxcD41u8flQU8z7fhzO0r83atVns3Go3u9Xr9x0O/RQXo9/tsIBBg6vX606a52Wz+bZ7P5/WwG29gxSJzhKgA6XTaDoFNF+krFAocmC//4yWEcSf2wTm7mCO19xFgSsKOLI16vV7b7XY7mRNoLwA0JymJ5uQIzgIAuX5PzDElT2m+E8BqtQ4ymcx7Yq7T6a6ZE4sKgOadTucaCwkxp1UzlEKh0GDxIXOwDWHAdi6Xe3swQDQa/Q7mywoolUpvsaptymazDWKxmBHTlWXZm405BFZoNpuGgwEmk4mE2SGtVivii4f1AO7J3ZopkQCQj7Ar1FeRChCJRJzVapX6DKNIfSc1Ax+wtQWQ55h6bH8FWDfYV4fO3wlwDr0C/BcADYiTPCxHqIEA2QsCZAkAKnRGkMbKN/sTX5YHPQ1e7SkAAAAASUVORK5CYII=';
+  'https://twentyhq.github.io/placeholder-images/workspaces/twenty-logo.png';
diff --git a/packages/twenty-front/src/modules/users/components/UserChip.tsx b/packages/twenty-front/src/modules/users/components/UserChip.tsx
@@ -1,6 +1,6 @@
 import { AvatarChip } from 'twenty-ui';
 
-import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
+import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 export type UserChipProps = {
   id: string;
@@ -13,6 +13,6 @@ export const UserChip = ({ id, name, avatarUrl }: UserChipProps) => (
     placeholderColorSeed={id}
     name={name}
     avatarType="rounded"
-    avatarUrl={getImageAbsoluteURIOrBase64(avatarUrl) || ''}
+    avatarUrl={getImageAbsoluteURI(avatarUrl) || ''}
   />
 );
diff --git a/packages/twenty-front/src/modules/workspace/components/WorkspaceMemberCard.tsx b/packages/twenty-front/src/modules/workspace/components/WorkspaceMemberCard.tsx
@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { Avatar, OverflowingTextWithTooltip } from 'twenty-ui';
 
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
-import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
+import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 const StyledContainer = styled.div`
   background: ${({ theme }) => theme.background.secondary};
@@ -39,7 +39,7 @@ export const WorkspaceMemberCard = ({
 }: WorkspaceMemberCardProps) => (
   <StyledContainer>
     <Avatar
-      avatarUrl={getImageAbsoluteURIOrBase64(workspaceMember.avatarUrl)}
+      avatarUrl={getImageAbsoluteURI(workspaceMember.avatarUrl)}
       placeholderColorSeed={workspaceMember.id}
       placeholder={workspaceMember.name.firstName || ''}
       type="squared"