Check if LWC is opened from Lightning App Builder

Question

I have several LWC's which interact with other LWC's on Custom App Page using Lightning Message Channel.

When you open the Page in Lightning App Builder these several LWC's is not visible.
They become visible after some action (pressing the button etc.)

And it is quite hard to configure the Page as when you put a LWC on a Page it is empty(not visible) :

So my question is :
Is there a way to determine if the LWC is opened from Lightning App Builder ? (to show some default preview for a user (Name and description of LWC)

I tried to check the page url, it looks in next way :

https://my-org-domain.lightning.force.com/flexipageEditor/surface.app?appLayout=lg&formfactorName=DESKTOP&aura.mode=PROD 

So we can check if the page url contains /flexipageEditor/ value ?
However I am not sure if is good and stable solution ?

Any help will be appreciated.
Thank You.

Answer 1

As mentioned in Tips for Working with Lightning App Builder, they recommend:

• Make components fill 100% of the width (including margins) of the region that they display in. See Make a Component Width-Aware.
• If components require interaction, provide an appropriate placeholder behavior in Lightning App Builder.
• Don’t display a blank box. Think of how other sites work. For example, Facebook displays an outline of the feed before the actual feed items come back from the server. The outline improves the user’s perception of UI responsiveness.
• If a component depends on a fired event, give it a default state that displays before the event fires.
• Use Salesforce Design System to style components.

In other words, you should provide some kind of loading template that appears before the component is fully loaded. This will prevent the builder from showing a blank space rather than the actual component, and make it easier to interact with it.

You should not generally need to determine if the component is in the builder or not if you provide a default view, and having such a view improves the overall UX, so this is really taking care of two problems at the same time.