Skip to content

httpResource isLoading block prevents incremental hydration to work as expected #63791

@jnizet

Description

@jnizet

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

This is probably linked to #59109 and #59153, but I'm not totally sure so I prefer posting this issue.

If I use an httpResource in a component, and then have the following in its template:

@if (foo.hasValue()) {
  <pre>{{ foo.value() | json }}</pre>
  @defer (hydrate never) {
    <app-bar />
  }
} @else if (foo.isLoading()) {
  <p>Loading... {{ logLoading() }}</p>
} @else if (foo.error()) {
  <p>Oops</p>
}

Then the @else if (foo.isLoading()) block prevents the incremental hydration to work as expected:

  • the Bar component is being constructed on the client
  • the http request that bar has already done to load bar.json on the server is done again on the client
  • the loading block is temporarily displayed even though everything is already available in the transfer state (and the DOM)

If the defer block is instead defined with @defer (on immediate; hydrate never), then

  • the loading block is temporarily displayed (unexpected)
  • Bar is still being constructed on the client (unexpected)
  • bar.json is not reloaded from the server (expected)

If the @else if (foo.isLoading()) is removed from the template, then everything works as expected:

  • Bar is not being constructed
  • bar.json is not reloaded from the server

Please provide a link to a minimal reproduction of the bug

https://github.com/jnizet/hydration-repro

Please provide the exception or error you saw

NA

Please provide the environment you discovered this bug in (run ng version)

Angular: 20.3.0
... common, compiler, compiler-cli, core, forms
... platform-browser, platform-server, router

Package                      Version
------------------------------------
@angular-devkit/architect    0.2003.1
@angular-devkit/core         20.3.1
@angular-devkit/schematics   20.3.1
@angular/build               20.3.1
@angular/cli                 20.3.1
@angular/ssr                 20.3.1
@schematics/angular          20.3.1
rxjs                         7.8.2
typescript                   5.8.3

Anything else?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: common/httpIssues related to HTTP and HTTP Clientcross-cutting: resourceIssues related to the newly introduced resource / httpResource

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions