feat(rx-stateful): non-flicker suspense

michaelbe812 · May 10, 2024 · 1d60706 · 1d60706
1 parent 58f67d0
commit 1d60706
Show file tree

Hide file tree

Showing 3 changed files with 229 additions and 87 deletions.
diff --git a/apps/demo/src/app/demos/demo-rx-stateful/demo-rx-stateful.component.ts b/apps/demo/src/app/demos/demo-rx-stateful/demo-rx-stateful.component.ts
@@ -2,15 +2,16 @@ import {Component, inject} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {HttpClient} from '@angular/common/http';
 
-import {delay, map, scan, Subject, switchMap, tap} from 'rxjs';
+import {BehaviorSubject, concatAll, delay, map, scan, Subject, switchMap, tap, toArray} from 'rxjs';
 import {ActivatedRoute} from '@angular/router';
 import {provideRxStatefulClient, RxStatefulClient, withConfig} from "@angular-kit/rx-stateful/experimental";
-import {rxStateful$} from "@angular-kit/rx-stateful";
+import {rxStateful$, withRefetchOnTrigger} from "@angular-kit/rx-stateful";
+import {MatButtonModule} from "@angular/material/button";
 
 @Component({
   selector: 'angular-kit-demo-rx-stateful',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, MatButtonModule],
   template: `
     <h1>DemoRxStatefulComponent</h1>
     <div>
@@ -29,11 +30,24 @@ import {rxStateful$} from "@angular-kit/rx-stateful";
         <li>{{ v | json }}</li>
       </ul>
     </div>
-    <div>
-      <h4>Query Params</h4>
-      <div>{{ query$ | async | json }}</div>
-      <div>{{ value$ | async | json }}</div>
-    </div>
+<!--    <div>-->
+<!--      <h4>Query Params</h4>-->
+<!--      <div>{{ query$ | async | json }}</div>-->
+<!--      <div>{{ value$ | async | json }}</div>-->
+<!--    </div>-->
+
+<!--    <br>-->
+<!--    <div>-->
+<!--      <button mat-button color="primary" (click)="page$$.next(-1)"> previous page </button>-->
+<!--      <button mat-button color="primary" (click)="page$$.next(1)"> next page </button>-->
+<!--      <button mat-button color="primary" (click)="refresh$$.next(null)"> Refresh current page </button>-->
+<!--      <div>-->
+<!--        <h4>State Accumulated</h4>-->
+<!--        <ul *ngFor="let v of state2Accumulated$ | async">-->
+<!--          <li>{{ v | json }}</li>-->
+<!--        </ul>-->
+<!--      </div>-->
+<!--    </div>-->
   `,
   styles: [],
   providers: [
@@ -74,10 +88,12 @@ export class DemoRxStatefulComponent {
   // );
 
 
-  state$ = rxStateful$(this.fetch(2500), {
+  state$ = rxStateful$(this.fetch(4000), {
     keepValueOnRefresh: false,
     keepErrorOnRefresh: false,
     refreshTrigger$: this.refresh$$,
+    suspenseTimeMs: 1000,
+    suspenseThresholdMs: 500
   });
 
   stateAccumulated$ = this.state$.pipe(
@@ -89,11 +105,54 @@ export class DemoRxStatefulComponent {
       return acc;
     }, [])
   );
+  readonly page$$ = new BehaviorSubject(0)
+  readonly page$ = this.page$$.pipe(
+    scan((acc, curr) => acc + curr, 0)
+  )
+
+  state2$ = rxStateful$(
+    (page) => this.fetchPage({
+      page,
+      delayInMs: 1000
+    }).pipe(
+
+    ),
+    {
+      sourceTriggerConfig: {
+        trigger: this.page$
+      },
+      refetchStrategies: withRefetchOnTrigger(this.refresh$$)
+    }
+  )
+  state2Accumulated$ = this.state2$.pipe(
+    tap(x => console.log({state: x})),
+    scan((acc, value, index) => {
+      // @ts-ignore
+      acc.push({ index, value });
+
+      return acc;
+    }, [])
+  );
 
   fetch(delayInMs = 800) {
     return this.http.get<any>('https://jsonplaceholder.typicode.com/todos/1').pipe(
       delay(delayInMs),
-      map((v) => v?.title)
+      map((v) => v?.title),
+      // tap(console.log)
+    );
+  }
+
+  fetchPage(params: {
+    delayInMs:number,
+    page: number
+  }) {
+
+    return this.http.get<any>(`https://jsonplaceholder.typicode.com/todos?_start=${params.page * 5}&_limit=5`).pipe(
+      delay(params.delayInMs),
+      concatAll(),
+      // @ts-ignore
+      map((v) => v?.id),
+      toArray()
     );
   }