Migrate to twenty-ui - layout/animated-placeholder (#7794)

This PR was created by [GitStart](https://gitstart.com/) to address the
requirements from this ticket:
[TWNTY-7531](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7531).

 --- 

### Description

- Migrate the `animated-placeholder` to `twenty-ui` and update all
imports.\
  \
  Fixes twentyhq/private-issues#87

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-app[bot]
2024-10-22 10:28:09 +02:00
committed by GitHub
parent bf0a059751
commit dfcf3ef879
20 changed files with 99 additions and 88 deletions

View File

@ -1,6 +1,14 @@
import styled from '@emotion/styled';
import { format, getYear } from 'date-fns';
import { H3Title } from 'twenty-ui';
import {
AnimatedPlaceholder,
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
EMPTY_PLACEHOLDER_TRANSITION_PROPS,
H3Title,
} from 'twenty-ui';
import { CalendarMonthCard } from '@/activities/calendar/components/CalendarMonthCard';
import { TIMELINE_CALENDAR_EVENTS_DEFAULT_PAGE_SIZE } from '@/activities/calendar/constants/Calendar';
@ -13,14 +21,6 @@ import { SkeletonLoader } from '@/activities/components/SkeletonLoader';
import { useCustomResolver } from '@/activities/hooks/useCustomResolver';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
EMPTY_PLACEHOLDER_TRANSITION_PROPS,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
import { Section } from '@/ui/layout/section/components/Section';
import { TimelineCalendarEventsWithTotal } from '~/generated/graphql';

View File

@ -1,10 +1,10 @@
import { Loader } from '@/ui/feedback/loader/components/Loader';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
AnimatedPlaceholder,
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
} from 'twenty-ui';
export const EmailLoader = ({ loadingText }: { loadingText?: string }) => (
<AnimatedPlaceholderEmptyContainer>

View File

@ -1,5 +1,14 @@
import styled from '@emotion/styled';
import { H1Title, H1TitleFontColor } from 'twenty-ui';
import {
AnimatedPlaceholder,
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
EMPTY_PLACEHOLDER_TRANSITION_PROPS,
H1Title,
H1TitleFontColor,
} from 'twenty-ui';
import { ActivityList } from '@/activities/components/ActivityList';
import { CustomResolverFetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
@ -11,14 +20,6 @@ import { getTimelineThreadsFromPersonId } from '@/activities/emails/graphql/quer
import { useCustomResolver } from '@/activities/hooks/useCustomResolver';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
EMPTY_PLACEHOLDER_TRANSITION_PROPS,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
import { Section } from '@/ui/layout/section/components/Section';
import { TimelineThread, TimelineThreadsWithTotal } from '~/generated/graphql';

View File

@ -1,6 +1,14 @@
import styled from '@emotion/styled';
import { ChangeEvent, useRef, useState } from 'react';
import { IconPlus } from 'twenty-ui';
import {
AnimatedPlaceholder,
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
EMPTY_PLACEHOLDER_TRANSITION_PROPS,
IconPlus,
} from 'twenty-ui';
import { SkeletonLoader } from '@/activities/components/SkeletonLoader';
import { AttachmentList } from '@/activities/files/components/AttachmentList';
@ -9,14 +17,6 @@ import { useAttachments } from '@/activities/files/hooks/useAttachments';
import { useUploadAttachmentFile } from '@/activities/files/hooks/useUploadAttachmentFile';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { Button } from '@/ui/input/button/components/Button';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
EMPTY_PLACEHOLDER_TRANSITION_PROPS,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
import { isDefined } from '~/utils/isDefined';
const StyledAttachmentsContainer = styled.div`

View File

@ -1,5 +1,13 @@
import styled from '@emotion/styled';
import { IconPlus } from 'twenty-ui';
import {
AnimatedPlaceholder,
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
EMPTY_PLACEHOLDER_TRANSITION_PROPS,
IconPlus,
} from 'twenty-ui';
import { SkeletonLoader } from '@/activities/components/SkeletonLoader';
import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
@ -8,14 +16,6 @@ import { useNotes } from '@/activities/notes/hooks/useNotes';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { Button } from '@/ui/input/button/components/Button';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
EMPTY_PLACEHOLDER_TRANSITION_PROPS,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
const StyledNotesContainer = styled.div`
display: flex;

View File

@ -1,6 +1,14 @@
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { IconPlus } from 'twenty-ui';
import {
AnimatedPlaceholder,
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
EMPTY_PLACEHOLDER_TRANSITION_PROPS,
IconPlus,
} from 'twenty-ui';
import { SkeletonLoader } from '@/activities/components/SkeletonLoader';
import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
@ -8,14 +16,6 @@ import { TASKS_TAB_LIST_COMPONENT_ID } from '@/activities/tasks/constants/TasksT
import { useTasks } from '@/activities/tasks/hooks/useTasks';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { Button } from '@/ui/input/button/components/Button';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
EMPTY_PLACEHOLDER_TRANSITION_PROPS,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
import { Task } from '@/activities/types/Task';

View File

@ -6,15 +6,15 @@ import { EventList } from '@/activities/timeline-activities/components/EventList
import { TimelineCreateButtonGroup } from '@/activities/timeline-activities/components/TimelineCreateButtonGroup';
import { useTimelineActivities } from '@/activities/timeline-activities/hooks/useTimelineActivities';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import {
AnimatedPlaceholder,
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
EMPTY_PLACEHOLDER_TRANSITION_PROPS,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
} from 'twenty-ui';
const StyledMainContainer = styled.div`
align-items: flex-start;

View File

@ -1,18 +1,19 @@
import { ThemeProvider, useTheme } from '@emotion/react';
import isEmpty from 'lodash.isempty';
import { useEffect, useState } from 'react';
import { FallbackProps } from 'react-error-boundary';
import { useLocation } from 'react-router-dom';
import { ThemeProvider, useTheme } from '@emotion/react';
import isEmpty from 'lodash.isempty';
import { IconRefresh, THEME_LIGHT } from 'twenty-ui';
import { Button } from '@/ui/input/button/components/Button';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
AnimatedPlaceholder,
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
IconRefresh,
THEME_LIGHT,
} from 'twenty-ui';
import { Button } from '@/ui/input/button/components/Button';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
type GenericErrorFallbackProps = FallbackProps;

View File

@ -1,18 +1,16 @@
import AnimatedPlaceholder, {
AnimatedPlaceholderType,
} from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
import { isObjectMetadataReadOnly } from '@/object-metadata/utils/isObjectMetadataReadOnly';
import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
import { Button } from '@/ui/input/button/components/Button';
import { useContext } from 'react';
import { IconComponent } from 'twenty-ui';
import {
AnimatedPlaceholder,
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
AnimatedPlaceholderType,
IconComponent,
} from 'twenty-ui';
type RecordTableEmptyStateDisplayProps = {
animatedPlaceholderType: AnimatedPlaceholderType;

View File

@ -1,16 +1,16 @@
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { Button } from '@/ui/input/button/components/Button';
import styled from '@emotion/styled';
import {
AnimatedPlaceholder,
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
EMPTY_PLACEHOLDER_TRANSITION_PROPS,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import { IconPlus } from 'twenty-ui';
import { Button } from '@/ui/input/button/components/Button';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import styled from '@emotion/styled';
IconPlus,
} from 'twenty-ui';
const StyledEmptyFunctionsContainer = styled.div`
height: 60vh;

View File

@ -1,110 +0,0 @@
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';
import { DARK_MOVING_IMAGE } from '@/ui/layout/animated-placeholder/constants/DarkMovingImage';
import { MOVING_IMAGE } from '@/ui/layout/animated-placeholder/constants/MovingImage';
const StyledContainer = styled.div`
display: flex;
align-items: center;
justify-content: center;
position: relative;
`;
interface StyledImageProps {
type: string;
}
const StyledBackgroundImage = styled.img<StyledImageProps>`
max-height: ${({ type }) =>
type === 'error500' || type === 'error404' ? '245px' : '160px'};
max-width: ${({ type }) =>
type === 'error500' || type === 'error404' ? '245px' : '160px'};
`;
const StyledMovingImage = styled(motion.img)<StyledImageProps>`
position: absolute;
max-width: ${({ type }) =>
type === 'error500' || type === 'error404' ? '185px' : '130px'};
max-height: ${({ type }) =>
type === 'error500' || type === 'error404' ? '185px' : '130px'};
z-index: 2;
`;
export type AnimatedPlaceholderType =
| keyof typeof BACKGROUND
| keyof typeof MOVING_IMAGE;
interface AnimatedPlaceholderProps {
type: AnimatedPlaceholderType;
}
const AnimatedPlaceholder = ({ type }: AnimatedPlaceholderProps) => {
const theme = useTheme();
const x = useMotionValue(window.innerWidth / 2);
const y = useMotionValue(window.innerHeight / 2);
const translateX = useTransform(x, [0, window.innerWidth], [-2, 2]);
const translateY = useTransform(y, [0, window.innerHeight], [-2, 2]);
useEffect(() => {
const handleMove = (event: MouseEvent | TouchEvent) => {
const clientX =
'touches' in event ? event.touches[0].clientX : event.clientX;
const clientY =
'touches' in event ? event.touches[0].clientY : event.clientY;
x.set(clientX);
y.set(clientY);
};
const handleLeave = () => {
animate(x, window.innerWidth / 2, {
type: 'spring',
stiffness: 100,
damping: 10,
});
animate(y, window.innerHeight / 2, {
type: 'spring',
stiffness: 100,
damping: 10,
});
};
window.addEventListener('mousemove', handleMove);
window.addEventListener('touchmove', handleMove);
window.document.addEventListener('mouseleave', handleLeave);
return () => {
window.removeEventListener('mousemove', handleMove);
window.removeEventListener('touchmove', handleMove);
window.document.removeEventListener('mouseleave', handleLeave);
};
}, [x, y]);
return (
<StyledContainer>
<StyledBackgroundImage
src={theme.name === 'dark' ? DARK_BACKGROUND[type] : BACKGROUND[type]}
alt="Background"
type={type}
/>
<StyledMovingImage
src={
theme.name === 'dark' ? DARK_MOVING_IMAGE[type] : MOVING_IMAGE[type]
}
alt="Moving"
style={{ translateX, translateY }}
transition={{ type: 'spring', stiffness: 100, damping: 10 }}
type={type}
/>
</StyledContainer>
);
};
export default AnimatedPlaceholder;

View File

@ -1,55 +0,0 @@
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
const StyledEmptyContainer = styled(motion.div)`
align-items: center;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(6)};
justify-content: center;
text-align: center;
`;
export { StyledEmptyContainer as AnimatedPlaceholderEmptyContainer };
export const EMPTY_PLACEHOLDER_TRANSITION_PROPS = {
initial: { opacity: 0 },
animate: { opacity: 1 },
transition: {
duration: 0.15,
},
};
const StyledEmptyTextContainer = styled.div`
align-items: center;
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(2)};
justify-content: center;
text-align: center;
width: 100%;
`;
export { StyledEmptyTextContainer as AnimatedPlaceholderEmptyTextContainer };
const StyledEmptyTitle = styled.div`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.lg};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
`;
export { StyledEmptyTitle as AnimatedPlaceholderEmptyTitle };
const StyledEmptySubTitle = styled.div`
color: ${({ theme }) => theme.font.color.tertiary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.regular};
line-height: ${({ theme }) => theme.text.lineHeight.lg};
max-height: 2.8em;
overflow: hidden;
width: 50%;
`;
export { StyledEmptySubTitle as AnimatedPlaceholderEmptySubTitle };

View File

@ -1,46 +0,0 @@
import styled from '@emotion/styled';
const StyledErrorContainer = styled.div`
align-items: center;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(8)};
justify-content: center;
text-align: center;
`;
export { StyledErrorContainer as AnimatedPlaceholderErrorContainer };
const StyledErrorTextContainer = styled.div`
align-items: center;
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(4)};
justify-content: center;
text-align: center;
width: 100%;
`;
export { StyledErrorTextContainer as AnimatedPlaceholderErrorTextContainer };
const StyledErrorTitle = styled.div`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.xl};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
line-height: ${({ theme }) => theme.text.lineHeight.lg};
`;
export { StyledErrorTitle as AnimatedPlaceholderErrorTitle };
const StyledErrorSubTitle = styled.div`
color: ${({ theme }) => theme.font.color.tertiary};
font-size: ${({ theme }) => theme.font.size.xs};
font-weight: ${({ theme }) => theme.font.weight.regular};
line-height: ${({ theme }) => theme.text.lineHeight.md};
max-height: 2.4em;
overflow: hidden;
`;
export { StyledErrorSubTitle as AnimatedPlaceholderErrorSubTitle };

View File

@ -1,16 +0,0 @@
export const BACKGROUND: Record<string, string> = {
noFile: '/images/placeholders/background/no_file_bg.png',
noNote: '/images/placeholders/background/no_note_bg.png',
noRecord: '/images/placeholders/background/no_record_bg.png',
noMatchRecord: '/images/placeholders/background/no_match_record_bg.png',
noTask: '/images/placeholders/background/no_task_bg.png',
errorIndex: '/images/placeholders/background/error_index_bg.png',
emptyTimeline: '/images/placeholders/background/empty_timeline_bg.png',
loadingMessages: '/images/placeholders/background/loading_messages_bg.png',
loadingAccounts: '/images/placeholders/background/loading_accounts_bg.png',
emptyFunctions: '/images/placeholders/background/empty_functions_bg.png',
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',
};

View File

@ -1,17 +0,0 @@
export const DARK_BACKGROUND: Record<string, string> = {
noFile: '/images/placeholders/dark-background/no_file_bg.png',
noNote: '/images/placeholders/dark-background/no_note_bg.png',
noRecord: '/images/placeholders/dark-background/no_record_bg.png',
noMatchRecord: '/images/placeholders/dark-background/no_match_record_bg.png',
noTask: '/images/placeholders/dark-background/no_task_bg.png',
errorIndex: '/images/placeholders/dark-background/error_index_bg.png',
emptyTimeline: '/images/placeholders/dark-background/empty_timeline_bg.png',
emptyInbox: '/images/placeholders/dark-background/empty_inbox_bg.png',
error404: '/images/placeholders/dark-background/404_bg.png',
error500: '/images/placeholders/dark-background/500_bg.png',
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',
};

View File

@ -1,17 +0,0 @@
export const DARK_MOVING_IMAGE: Record<string, string> = {
noFile: '/images/placeholders/dark-moving-image/no_file.png',
noNote: '/images/placeholders/dark-moving-image/no_note.png',
noRecord: '/images/placeholders/dark-moving-image/no_record.png',
noMatchRecord: '/images/placeholders/dark-moving-image/no_match_record.png',
noTask: '/images/placeholders/dark-moving-image/no_task.png',
errorIndex: '/images/placeholders/dark-moving-image/error_index.png',
emptyTimeline: '/images/placeholders/dark-moving-image/empty_timeline.png',
emptyInbox: '/images/placeholders/dark-moving-image/empty_inbox.png',
error404: '/images/placeholders/dark-moving-image/404.png',
error500: '/images/placeholders/dark-moving-image/500.png',
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',
};

View File

@ -1,16 +0,0 @@
export const MOVING_IMAGE: Record<string, string> = {
noFile: '/images/placeholders/moving-image/no_file.png',
noNote: '/images/placeholders/moving-image/no_note.png',
noRecord: '/images/placeholders/moving-image/no_record.png',
noMatchRecord: '/images/placeholders/moving-image/no_match_record.png',
noTask: '/images/placeholders/moving-image/no_task.png',
errorIndex: '/images/placeholders/moving-image/error_index.png',
emptyTimeline: '/images/placeholders/moving-image/empty_timeline.png',
loadingMessages: '/images/placeholders/moving-image/loading_messages.png',
loadingAccounts: '/images/placeholders/moving-image/loading_accounts.png',
emptyFunctions: '/images/placeholders/moving-image/empty_functions.png',
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',
};