Feat(frontend): improve the soft delete empty state (#6877)

# This PR

- Fix #6834 

## Demo


https://www.loom.com/share/235c4425f3264f429e2064a9d1604a90?sid=02a815c9-3b1a-45e6-b5ce-d5eb3b40e10e

## Notes

- There is a missing icon in Figma corresponding to the
`noDeletedRecordFound` in the dark mode, thus I used the same icon
(different background because we have the correct background image) for
both dark / light modes
<img width="625" alt="Screenshot 2024-09-03 at 15 04 57"
src="https://github.com/user-attachments/assets/cbc0c3dd-a1ee-49a5-be9a-36450e78a992">
cc: @Bonapara

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/AnimatedPlaceholder.tsx

@@ -1,7 +1,7 @@
-import { useEffect } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { animate, motion, useMotionValue, useTransform } from 'framer-motion';
+import { useEffect } from 'react';
 
 import { BACKGROUND } from '@/ui/layout/animated-placeholder/constants/Background';
 import { DARK_BACKGROUND } from '@/ui/layout/animated-placeholder/constants/DarkBackground';
@@ -35,8 +35,12 @@ const StyledMovingImage = styled(motion.img)<StyledImageProps>`
   z-index: 2;
 `;
 
+export type AnimatedPlaceholderType =
+  | keyof typeof BACKGROUND
+  | keyof typeof MOVING_IMAGE;
+
 interface AnimatedPlaceholderProps {
-  type: keyof typeof BACKGROUND | keyof typeof MOVING_IMAGE;
+  type: AnimatedPlaceholderType;
 }
 
 const AnimatedPlaceholder = ({ type }: AnimatedPlaceholderProps) => {

packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/Background.ts

@@ -12,4 +12,5 @@ export const BACKGROUND: Record<string, string> = {
   emptyInbox: '/images/placeholders/background/empty_inbox_bg.png',
   error404: '/images/placeholders/background/404_bg.png',
   error500: '/images/placeholders/background/500_bg.png',
+  noDeletedRecord: '/images/placeholders/background/no_deleted_record_bg.png',
 };

packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/DarkBackground.ts

@@ -12,4 +12,6 @@ export const DARK_BACKGROUND: Record<string, string> = {
   loadingMessages: '/images/placeholders/background/loading_messages_bg.png',
   loadingAccounts: '/images/placeholders/background/loading_accounts_bg.png',
   emptyFunctions: '/images/placeholders/dark-background/empty_functions_bg.png',
+  noDeletedRecord:
+    '/images/placeholders/dark-background/no_deleted_record_bg.png',
 };

packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/DarkMovingImage.ts

@@ -12,4 +12,6 @@ export const DARK_MOVING_IMAGE: Record<string, string> = {
   loadingMessages: '/images/placeholders/moving-image/loading_messages.png',
   loadingAccounts: '/images/placeholders/moving-image/loading_accounts.png',
   emptyFunctions: '/images/placeholders/dark-moving-image/empty_functions.png',
+  noDeletedRecord:
+    '/images/placeholders/dark-moving-image/no_deleted_record.png',
 };

packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/MovingImage.ts

@@ -12,4 +12,5 @@ export const MOVING_IMAGE: Record<string, string> = {
   emptyInbox: '/images/placeholders/moving-image/empty_inbox.png',
   error404: '/images/placeholders/moving-image/404.png',
   error500: '/images/placeholders/moving-image/500.png',
+  noDeletedRecord: '/images/placeholders/moving-image/no_deleted_record.png',
 };