Conversation
Bruker [content-visibility](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content-visibility) for å tegne obskort når browser mener de er relevante. Lytter deretter på (contentvisibilityautostatechange)[https://developer.mozilla.org/en-US/docs/Web/API/Element/contentvisibilityautostatechange_event] event for å lage bildekarusell (med kart og snøprofil) når browseren mener innholdet er relevant. Syns logikken i komponenten blir litt enklere, og vi slipper å implementere to interface (ngAfterViewInit og ngDestroy). Se også https://modern-css.com/lazy-rendering-without-intersection-observer/ TODO: Test på iOS hvor vi tidligere har hatt "hvit-skjerm"-feil. NB! Jeg ser at templaten i develop har en slags feil ved at `app-observation-location-map` og `app-snow-profile` refererer til `reg` uten at `reg` er deklarert. Litt rart vi ikke har fått feil knytta til dette, men denne PRen fikser evt også det.
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-water-056410803-954.westeurope.azurestaticapps.net |
There was a problem hiding this comment.
Pull request overview
Oppdaterer lazy loading av observasjonskort ved å bruke CSS content-visibility og contentvisibilityautostatechange-eventen for å styre når bilde-/kart-/snøprofil-karusellen rendres, og rydder samtidig opp i templaten ved å introdusere en felles reg-binding.
Changes:
- Bytter fra
IntersectionObservertilcontent-visibility+contentvisibilityautostatechangefor å trigge rendering av swiper/karusell. - Fjerner
AfterViewInit/OnDestroy-logikk knyttet til observeren og introduserervisibilityChange()-handler på host. - Rydder opp i HTML ved å bruke
@let reg = registration()konsekvent.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/app/components/observation/observation/observation.component.ts | Erstatter IntersectionObserver med host-event for content-visibility og styrer isVisible via visibilityChange() |
| src/app/components/observation/observation/observation.component.html | Introduserer reg og bruker den for å unngå repetert registration()-kall / fikser tidligere udeklarert reg-bruk |
| src/app/components/observation/observation/observation.component.css | Aktiverer content-visibility og setter contain-intrinsic-size for bedre lazy rendering/layout-stabilitet |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-water-056410803-954.westeurope.azurestaticapps.net |
gruble
left a comment
gruble
left a comment
There was a problem hiding this comment.
Lærer stadig noe nytt av deg!
Jeg har ikke testet dette på tlf, men så jo ut til å funke bra på web.
Jeg blei litt i tvil om hvor godt dette støttes av eldre telefoner, syntes det er litt vanskelig å skjønne denne: https://caniuse.com/?search=content-visibility%3A+auto
Venter med å teste på tlf til jeg har testet ferdig PR på race-condition ved initialisering av spor.
Bruker content-visibility for å tegne obskort når browser mener de er relevante. Lytter deretter på contentvisibilityautostatechange event for å lage bildekarusell (med kart og snøprofil) når browseren mener innholdet er relevant.
Syns logikken i komponenten blir litt enklere, og vi slipper å implementere to interface (ngAfterViewInit og ngDestroy). Ser også at initialiseringen av bildekarusell skjer litt tidligere enn før, slik at navigering i lista ser litt smidigere ut enn tidligere, uten at jeg tror det har nevneverdig påvirkning på ytelsen (ytelsen bør heller bli bedre av denne endringen).
Se også https://modern-css.com/lazy-rendering-without-intersection-observer/
TODO: Test på iOS hvor vi tidligere har hatt "hvit-skjerm"-feil.
NB! Jeg ser at templaten i develop har en slags feil ved at
app-observation-location-mapogapp-snow-profilerefererer tilreguten atreger deklarert. Litt rart vi ikke har fått feil knytta til dette, men denne PRen fikser evt også det.