New Empty states

[Bonapara]

Current Behavior

The empty states consist of two texts and a call-to-action (CTA):

404 & 500 Error pages	Indexes Empty state

Desired behavior

We want to update the following empty States with an animated illustration:

ERROR PAGES

• 500 error page
• 404 error page

INDEXES

• No records on an index
• 500 error on an index

SHOWS

- No activities in the record timeline.

• No tasks associated with the record.
• No notes associated with the record.
• No files associated with the record.

The goal is to make the illustration track the mouse:

https://github.com/twentyhq/twenty/assets/19412894/edb1624b-30d6-41a2-bb3a-1b246918cb45

Ensure that the size of the Figma files is appropriate. For small illustrations, the largest side should be 160px, while for larger illustrations like error 500 and 404, the bigger side should be 240px.

Export the images:

Export the images in PNG format using the X2 parameter in Figma:

1. Select an image.
2. Set up the export preferences.
3. Click "export."

Implement the effect.

Please ensure that the dimensions of the illustrations are as specified above.

Bonus: The moving image should return to its initial position when the mouse leaves the window. Use Framer Motion as library.

👀See effect on codesandbox

Implement the new titles & subtiles

(The spacing also have been updated)

Figma

https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty?type=design&node-id=19450-97860&mode=design&t=OsVwULzMocuuEGia-11

Codesandbox

Link

[FelixMalfait]

This looks so cool! 😍

[Kanav-Arora]

Hi @FelixMalfait Looks interesting. I can give this one a shot. Please assign me.

[Bonapara]

Thanks so much @Kanav-Arora 🙌

[Kanav-Arora]

Hi @charlesBochet I have thought of way of using a reusable component for this one Can you give me an idea of naming and the desired directory for the component ? and I am adding these images to the public/images/status if its alright

I'm just asking this beforehand to save to effort of renaming the files

[charlesBochet]

Love the design!

[charlesBochet]

@Kanav-Arora

• I would go with: public/images/placeholders for the images
• I would create a "animated-placeholder" section in ui/layout folder that would be able to display an image and to track the mouse
• then I will use it directly in the Pages for 404, 500 global handler
• and I will use it in the existing empty states / error components

Thanks a lot as always!

[Kanav-Arora]

Hi

In the figma files the design is not corresponding to our theme values. I'm not sure about the gap. @charlesBochet I have introduced Title and Subtitle columns which can be reused instead of creating styled components for every section.

@Bonapara I'm not sure about the gap between image, title and subtitle Can you look into it and confirm so that I can proceed to other sections.

I have taken design values which were close to figma but this looks small to me. Please confirm once

[Bonapara]

Hi @Kanav-Arora! Good catch! On Figma, there should be a 24px gap between the illustration and text, as well as between the text and CTA. Does your branch follow this guideline? Looks indeed too narrow, otherwise we should switch it to 32px

[Kanav-Arora]

Hi @FelixMalfait @charlesBochet @Bonapara Can you give latest commit a look. Text looks small to me

[Kanav-Arora]

Hi @charlesBochet I need a suggestion Error 500 and 404 are being enqueued to Snackbar queue. Now if error.status is 500 and 404 we want this new page so should I add this condition in enqueue function? if status code will be 500 or 404 instead of adding error to queue we'll show that route

[FelixMalfait]

@Kanav-Arora Not 100% sure I understood correctly but I feel like errors that are in snackbars should remain in snackbars - we don't want to make the experience worth than it is by redirecting them to a different page and losing ongoing work/context. We already have a 404 page:

The 500 design we can use for when it looks like in #2788? Not really a 500 / server error though so probably we should adapt the naming a bit (e.g. error_404, error_critical instead of 500)

[Kanav-Arora]

See not found route is being rendered when no route is found i.e '*' My point is when are we rendering 500 error as this error is being handled by Snackbar like below. IG currently there's no specific logic for handling 500 errors.

[FelixMalfait]

@Kanav-Arora yes but after consideration I think we should keep those 500 errors on apollo queries as snackbar. For example if you're looking at a given company then you attempt to create a note and it doesn't work for some reason, you don't want to make it worse by redirecting them to a different page. The only use-case for the 500 design would be when the frontend server returning the initial App.tsx / handling the initial load returns a 500. That's seems unlikely to happen often.

[charlesBochet]

Indeed, errors can happen at 3 level:

• App level: display the big 500 error
• Page or section level: display the 500 within the page
• Server side / apollo query : let's keep it in the snack bar

[Kanav-Arora]

Hi @Kanav-Arora! Good catch! On Figma, there should be a 24px gap between the illustration and text, as well as between the text and CTA. Does your branch follow this guideline? Looks indeed too narrow, otherwise we should switch it to 32px

@Bonapara

What should be the gap between title and subtitle

[Bonapara]

@Kanav-Arora supposed to be 12px

[Kanav-Arora]

Hi @Bonapara I'm not sure I have taken font size according to figma only but for 404 and 500 error these look bit small to me. Am I taking the right sizes?

[Bonapara]

Hi @Kanav-Arora, the title font size is 24px, and the subtitle is the regular 13px. The gap between the two titles is 16px.

Do you have access to the Figma? https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty?type=design&node-id=19450-93376&mode=design&t=gJFE7wMxsSs71Fru-11