Added skeleton loader on page load

[jeet1desai]

Fix: #3722

Dark

Light

[la-flor]

Passing down a new loading variable is one approach. But I think we can do this without having to add another variable to pass down and keep track of and optionally handle in other places that PageHeader is used.

If we properly handle the concatenation of firstName and lastName in the declaration of the pageName variable here, we can ensure that undefined undefined isn't passed down as a string.

I propose the following declaration of pageName, that we remove the use of the loading variable, and have the skeleton loading be conditional upon title being truthy.

  const pageName =
    objectNameSingular === 'person'
      ? record?.name.firstName || record?.name.firstName
        ? (
            (record?.name.firstName ?? '') +
            ' ' +
            (record?.name.lastName ?? '')
          ).trim()
        : null
      : record?.name;

And if you don't think that code is as legible, you could additionally pull out the name concatenation into its own function.

Reader be aware that I am not a regular contributor (yet). So take my advice as you would like.

[jeet1desai]

Thank you @la-flor for your valuable review.

@lucasbordeau, I'd like to hear your thoughts on whether I should use "loading" or "title" as the checker.

[lucasbordeau]

@jeet1desai That's perfect now, thank you !

@la-flor I think we shouldn't try to guess it here for multiple reasons :

• It's generally better not to presume anything from a level below, and if in doubt, rely on passing down the semantical intent we have for this component, it's like "Hey PageHeader component put yourself in loading state, I'm managing complex Apollo networking stuff so I'll tell you when loading is finished, while you handle how to nicely display a waiting state for the user"
• We use PageHeader component to display any text, not just person name field, so we should also let the level above decide what text should be displayed. PageHeader is focused on UI and should be responsible only for displaying the intents of its props.