Advice for setting up dynamic page loading boundary and meta override

Developer Support
1

I’d like some advice for setting up a dynamic page that works well for SEO, feels nice when loading the data, and has fallbacks for wrong urls. I’m mainly just using Plasmic Studio but setting up a code component is ok if needed.

So, this is what I know and have done separately:

  • using the Page Meta Override component, I set up the meta info (title, description, image) to dynamically load from a data integration.
  • using the Loading Boundary component, I created a loading view of the website while the data integration queries my data
  • using the Condition Guard component, I can redirect if the data integration results return null

However, I’m not sure what layer order to put these items, since from my testing:

  1. The Page Meta Override component can’t be inside a Loading Boundary component because then the page returns with no meta data (checked using opengraph.xyz)
  2. This means the Loading Boundary doesn’t actually show the loading state because there’s separate dynamic data integration data to load :frowning:
  3. (not sure) but I feel like adding the Page Meta Override component inside the Condition Guard component might also return no meta data…

So, because of this I’ve just accepted that my dynamic pages will always show a white screen and the Loading… message in the top left for the sake of SEO :sleepy_face:

2

Hello @leafer_design

Your Page Meta Override component doesn’t need to be inside the Loading Boundary. You can keep it outside, and place only the components that render on the page within the Loading Boundary.

1 Like
3

Hi Sarah, thanks for the response!

Upon closer inspection, you’re right, the Page Meta Override does seem to work fine with when placed outside of the Loading Boundary!
I was mistaken because a “Loading…” in the top left still first flashes when previewing the artboard in Plasmic Studio. This is a little deceiving but I can imagine it’s due to backend structure?

By the way, what’s the best way to use the loading boundary? Should I
(a) wrap everything that’s repeated in a Loading Boundary and create a blank repeated version for the loading state, or
(b) build the structure once and wrap each individual element in a Loading Boundary in their individual sections?

image
image1024×1536 126 KB

For example, let’s say I have a Header slider section with 4 slides that dynamically shows an image, title, link, etc. for the 4 latest portfolio entries. With the goal of wanting to show a loading state for better UX and low cumulative layout shift, should I
(option a) wrap the entire slider in a loading boundary and for the loading state duplicate the slider but with a blank slide repeated 4 times, or
(option b) create a header slider card component and wrap each individual dynamic field in a loading boundary with their relative loading state visuals, and then this card would be repeated for the 4 latest?

Later, I was also able to figure out a working Conditional Guard as well :smiling_face_with_sunglasses:
something along these lines for any future forum readers:

<Page Meta Override> <- added optional chaining and fallbacks to prevent errors
<Loading Boundary>
     <Condition Guard> <- with redirects
          ( main content )
     </Condition Guard>
</Loading Boundary>

Thanks again for the reply!