Best way of creating a "Preview/Publish" profile feature


I’d love some advice on how best to build a feature to optimise for page load speed.

In short, my application allows users to build a profile to showcase content (this happens to be links to music content held on other platforms).

The data structure used when loading a profile is:

User (with a bunch of fields, such as name, profile image, color theme etc)

Profile Sections (a list of sections shown on their profile, stored as a list on the User)

Profile Section Items (a list of items in each section, stored as a list on a Profile Section)

I have two pages - one for editing the profile, and one for viewing a published profile. On both pages the user can see the profile, with the edit page having a sidepanel to edit their profile settings and links.

It’s desired that the user can make changes to the profile on the Editing page, before publishing the changes and making them visible on the Published page.

Currently to build this I have used a reusable component as the ‘profile’ and am planning to duplicate all fields to have an edited and published version. E.g. a Profile Section would have a ‘Title Published’ and ‘Title Edited’.

Then when displaying the profile, I plan to conditionally change the content depending on whether it is the Edited or Published page, using a state.

My concern is that this will slow down the page load time considerably, as each element on the page will have roughly double the conditional statements it has now, to determine which version to show.

I’m most concerned about the ‘Published’ page load time, and don’t mind as much if the ‘Editing’ page is slow.

There are probably 500 elements on an average page, pulling data from 100 fields across the User, Profile Section and Profile Section Link data type, with many of them already having conditional statements.

E.g. a statement that says:
‘If Title is empty then don’t show this element’

Changes to two statements:
‘If Title Edited and Profile is in ‘Editing’ state then don’t show this element’
‘If Title Published and Profile is in ‘Published’ state then don’t show this element’.)

Has anyone tried to build anything similar and can help advise on the best way to structure data to optimise for page load speed of the Published page?

Appreciate any thoughts, and apologies for a lengthy post!

This topic was automatically closed after 70 days. New replies are no longer allowed.