Improve performance of demo workspace - Rename getImageAbsoluteURIOrBase64 function (#6282)

### Description

1. This PR is a continuation of a previous PR:
https://github.com/twentyhq/twenty/pull/6201#pullrequestreview-2175601222

2. One test case was removed here:
`packages/twenty-front/src/utils/image/__tests__/getImageAbsoluteURI.test.ts`
because since we are not handling base64 images anymore, the result is
the same of the last test case. Would you rather we update the test
instead?


### Refs

- #3514
- https://github.com/twentyhq/twenty/pull/6201

### Demo


https://www.loom.com/share/4f32b535c77a4d418e319b095d09452c?sid=df34adf8-b013-44ef-b794-d54846f52d2d

Fixes #3514

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>

packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import React, { useMemo } from 'react';
 import { IconFileUpload, IconTrash, IconUpload, IconX } from 'twenty-ui';
 
 import { Button } from '@/ui/input/button/components/Button';
+import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 import { isDefined } from '~/utils/isDefined';
 
 const StyledContainer = styled.div`
@@ -105,16 +106,18 @@ export const ImageInput = ({
     hiddenFileInput.current?.click();
   };
 
+  const pictureURI = useMemo(() => getImageAbsoluteURI(picture), [picture]);
+
   return (
     <StyledContainer className={className}>
       <StyledPicture
-        withPicture={!!picture}
+        withPicture={!!pictureURI}
         disabled={disabled}
         onClick={onUploadButtonClick}
       >
-        {picture ? (
+        {pictureURI ? (
           <img
-            src={picture || '/images/default-profile-picture.png'}
+            src={pictureURI || '/images/default-profile-picture.png'}
             alt="profile"
           />
         ) : (
@@ -139,7 +142,7 @@ export const ImageInput = ({
               onClick={onAbort}
               variant="secondary"
               title="Abort"
-              disabled={!picture || disabled}
+              disabled={!pictureURI || disabled}
               fullWidth
             />
           ) : (
@@ -157,7 +160,7 @@ export const ImageInput = ({
             onClick={onRemove}
             variant="secondary"
             title="Remove"
-            disabled={!picture || disabled}
+            disabled={!pictureURI || disabled}
             fullWidth
           />
         </StyledButtonContainer>

packages/twenty-front/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,

packages/twenty-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';