@placeholder vs @loading

[eluchsinger]

Describe the problem that you experienced

Reading the @defer documentation, the two sub blocks @placeholder and @loading are mentioned.

But there is no guidance on when to use which one and what the differences are. Both blocks seem to do the same thing and accept the same parameters. A loading spinner can also be a placeholder.

How should each one of these sub blocks be used? Is this just a semantic difference?

Enter the URL of the topic with the problem

https://angular.io/guide/defer#blocks

Describe what you were looking for in the documentation

No response

Describe the actions that led you to experience the problem

No response

Describe what you want to experience that would fix the problem

Expand on when to use @loading vs @placeholder. There seems to be no difference in functionality.

Add a screenshot if that helps illustrate the problem

No response

If this problem caused an exception or error, please paste it here

No response

If the problem is browser-specific, please specify the device, OS, browser, and version

No response

Provide any additional information here in as much as detail as you can

No response

[JeanMeche]

Hi,

Placeholder:

The @Placeholder is an optional block that declares content to show before the defer block is triggered.

Loading:

The @Loading block is an optional block that allows you to declare content that will be shown during the loading of any deferred dependencies.

The difference seams quite clear here. The loading block replaces the placeholder onces trigger has fired/loading has started.

[eluchsinger]

Sorry - I must have missed that first paragraph. I agree that the sentence in the @placeholder sub block makes it quite clear. But the second sentence only makes sense after realizing that there are three states in a @defer block:

1. Waiting: The @defer block has not been triggered; conditions not met. The content is not loading.
2. Loading: The @defer is triggered (conditions are met). The deferred content is loading. The @placeholder block is now hidden and the @loading block is showing).
3. Loaded/Ready: The deferred content is loaded and shown. Other sub blocks disappear.

[ducin]

IMO adding a simple sentence would help a lot:

The @loading block is an optional block that allows you to declare content that will be shown during the loading of any deferred dependencies. The @loading block replaces the @Placeholder block once loading has been triggered. For example, you could show a loading spinner. Similar to @placeholder, the dependencies of the @loading block are eagerly loaded.

[eluchsinger]

I have created a PR for your change @ducin. I think it's a small enough change so that it's hopefully not complicated to merge it 👍 . Let's see what happens!

[AndrewKushnir]

Closing this issue, since PR #54779 was merged.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}