Mer moderne lazy loading av obskort

src/app/components/observation/observation/observation.component.css

@@ -1,4 +1,14 @@
 :host {
+  /*
+    NB! Brukes sammen med contentvisibilityautostatechange-event og visibilityChange-metoden i komponenten.
+    Fjern derfor ikke disse linjene uten å justere på koden i komponenten.
+
+    500px fungerer som en slags default høyde på obskort før layout/paint mtp scrollbar,
+    virker som 500px fungerer greit (scrollbar hopper ikke etter at browser vet faktisk høyde).
+  */
+  content-visibility: auto;
+  contain-intrinsic-size: auto 500px;
+
   display: block;
   max-width: var(--desktop-max-width);
   margin: 0 auto;

src/app/components/observation/observation/observation.component.html

@@ -1,4 +1,6 @@
 <!-- Et observasjonskort. Viser data fra en observasjon, et miniatyrkart over posisjonen og bilder i en karusell -->
+@let reg = registration();
+
 <div class="swiper-wrapper">
   @if (isVisible()) {
     <swiper-container
@@ -43,7 +45,7 @@
 
 <div class="content">
   <app-registration-header>
-    {{ registration().ObsLocation.Title }}
+    {{ reg.ObsLocation.Title }}
   </app-registration-header>
   <div>
     <ion-chip color="primary" disabled>
@@ -53,7 +55,7 @@
         >:</ion-label
       >
       <ion-label>
-        {{ registration().DtObsTime | date: "short" }}
+        {{ reg.DtObsTime | date: "short" }}
       </ion-label>
     </ion-chip>
 
@@ -64,28 +66,26 @@
           ><b> {{ "REGISTRATION.CARD.TIME.UPDATED" | translate }}</b
           >:</ion-label
         >
-        <ion-label> {{ registration().DtChangeTime | date: "short" }}</ion-label>
+        <ion-label> {{ reg.DtChangeTime | date: "short" }}</ion-label>
       } @else {
         <ion-label
           ><b> {{ "REGISTRATION.CARD.TIME.REGISTERED" | translate }}</b
           >:</ion-label
         >
-        <ion-label> {{ registration().DtRegTime | date: "short" }}</ion-label>
+        <ion-label> {{ reg.DtRegTime | date: "short" }}</ion-label>
       }
     </ion-chip>
 
-    <app-geohazard-chip [registration]="registration()"></app-geohazard-chip>
+    <app-geohazard-chip [registration]="reg"></app-geohazard-chip>
 
     <ion-chip color="primary" disabled>
       <ion-icon name="location-outline"></ion-icon>
-      <ion-label>
-        {{ registration().ObsLocation.Height }} {{ "MAP_CENTER_INFO.ABOVE_SEA_LEVEL" | translate }}
-      </ion-label>
+      <ion-label> {{ reg.ObsLocation.Height }} {{ "MAP_CENTER_INFO.ABOVE_SEA_LEVEL" | translate }} </ion-label>
     </ion-chip>
 
-    <app-observer-chip [observer]="registration().Observer"></app-observer-chip>
+    <app-observer-chip [observer]="reg.Observer"></app-observer-chip>
 
-    @if (registration().ObserverGroupName; as group) {
+    @if (reg.ObserverGroupName; as group) {
       <ion-chip color="primary" disabled>
         <ion-icon name="people-circle-outline"></ion-icon>
         <ion-label>{{ group }}</ion-label>
@@ -94,8 +94,6 @@
   </div>
 
   <!-- #region skjemaliste -->
-  @let reg = registration();
-
   @if (hasData(reg.DangerObs)) {
     <h3>{{ "REGISTRATION.DANGER_OBS.TITLE" | translate }}</h3>
     <app-summary [summaries]="getSummaries(reg, RegistrationTid.DangerObs)"></app-summary>

src/app/components/observation/observation/observation.component.ts

@@ -1,14 +1,4 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  CUSTOM_ELEMENTS_SCHEMA,
-  ElementRef,
-  inject,
-  input,
-  OnDestroy,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, CUSTOM_ELEMENTS_SCHEMA, inject, input } from '@angular/core';
 import { IonChip, IonIcon, IonLabel, ModalController } from '@ionic/angular/standalone';
 import { AttachmentViewModel, RegistrationViewModel } from 'src/app/modules/common-regobs-api';
 import { addIcons } from 'ionicons';
@@ -48,6 +38,7 @@ import { SnowProfileComponent } from '../../snow-profile/snow-profile.component'
 import { CarouselItems } from '../observation-image-carousel/models';
 
 const DEBUG_TAG = 'ObservationComponent';
+const isVisibleInitialValue = CSS.supports('content-visibility: auto') ? false : true;
 
 @Component({
   selector: 'app-observation',
@@ -73,13 +64,19 @@ const DEBUG_TAG = 'ObservationComponent';
   styleUrl: './observation.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  host: {
+    // Eventen trigges når browseren mener komponenten begynner å bli relevant for brukeren (skipped=false),
+    // eller slutter å være relevant (skipped=true).
+    // For å unngå å hente/rendre snøprofiler og bildekarusell for tidlig bruker vi denne eventen for å
+    // kun rendre innholdet når det er relevant.
+    // Dette er et alternativ til IntersectionObserver som vi brukte før.
+    '(contentvisibilityautostatechange)': 'visibilityChange($event)',
+  },
 })
-export class ObservationComponent implements AfterViewInit, OnDestroy {
+export class ObservationComponent {
   private logger = inject(LoggingService);
   private translateService = inject(TranslateService);
-  private elementRef = inject(ElementRef);
   private imageCarousel = injectImageCarousel();
-  private intersectionObserver?: IntersectionObserver;
 
   modalController = inject(ModalController);
 
@@ -116,31 +113,22 @@ export class ObservationComponent implements AfterViewInit, OnDestroy {
     });
   }
 
+  visibilityChange(event: Event) {
+    const skipped = (event as ContentVisibilityAutoStateChangeEvent).skipped;
+    if (skipped === false) {
+      this.isVisible$.next(true);
+    } else {
+      this.isVisible$.next(false);
+    }
+  }
+
   // For å håndtere veldig kjapp scrolling oppover sluser vi eventene via en subject med en debounce
-  // Da vil forhåpentligvis de observasjonskortene som bare scrolles superkjapt forbi ikke rendre swiper
+  // Da vil forhåpentligvis de bildekarusellene som bare scrolles superkjapt forbi ikke rendre swiper
   // i det hele tatt.
   // Etter å ha lagt til dette fikk jeg ikke lenger sporadiske kræsj ved superhurtig scrolling,
   // men bør sikkert testes mer.
   private isVisible$ = new Subject<boolean>();
-  isVisible = toSignal(this.isVisible$.pipe(debounceTime(100)), { initialValue: false });
-
-  ngAfterViewInit(): void {
-    this.intersectionObserver = new IntersectionObserver(
-      ([entry]) => {
-        this.isVisible$.next(entry.isIntersecting);
-      },
-      {
-        root: null,
-        threshold: 0.1,
-      }
-    );
-
-    this.intersectionObserver.observe(this.elementRef.nativeElement);
-  }
-
-  ngOnDestroy(): void {
-    this.intersectionObserver?.disconnect(); // Vet ikke om denne er nødvendig
-  }
+  isVisible = toSignal(this.isVisible$.pipe(debounceTime(100)), { initialValue: isVisibleInitialValue });
 
   setFallbackImage(attachment: AttachmentViewModel) {
     if (!attachment.UrlFormats) {