[PM-26688][PM-27710] Delay skeletons from showing + search (#17394)

* add custom operator for loading skeleton delays

* add `isCipherSearching$` observable to search service

* prevent vault skeleton from showing immediately

* add skeleton for search + delay to sends

* update fade-in-out component selector

* add fade-in-out component for generic use

* address memory leak by using defer to encapsulate `skeletonShownAt`

* add missing provider

libs/common/src/vault/abstractions/search.service.ts

@@ -6,6 +6,9 @@ import { CipherView } from "../models/view/cipher.view";
 import { CipherViewLike } from "../utils/cipher-view-like-utils";
 
 export abstract class SearchService {
+  abstract isCipherSearching$: Observable<boolean>;
+  abstract isSendSearching$: Observable<boolean>;
+
   abstract indexedEntityId$(userId: UserId): Observable<IndexedEntityId | null>;
 
   abstract clearIndex(userId: UserId): Promise<void>;

libs/common/src/vault/services/search.service.ts

@@ -1,7 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import * as lunr from "lunr";
-import { Observable, firstValueFrom, map } from "rxjs";
+import { BehaviorSubject, Observable, firstValueFrom, map } from "rxjs";
 import { Jsonify } from "type-fest";
 
 import { perUserCache$ } from "@bitwarden/common/vault/utils/observable-utilities";
@@ -81,6 +81,12 @@ export class SearchService implements SearchServiceAbstraction {
   private readonly defaultSearchableMinLength: number = 2;
   private searchableMinLength: number = this.defaultSearchableMinLength;
 
+  private _isCipherSearching$ = new BehaviorSubject<boolean>(false);
+  isCipherSearching$: Observable<boolean> = this._isCipherSearching$.asObservable();
+
+  private _isSendSearching$ = new BehaviorSubject<boolean>(false);
+  isSendSearching$: Observable<boolean> = this._isSendSearching$.asObservable();
+
   constructor(
     private logService: LogService,
     private i18nService: I18nService,
@@ -223,6 +229,7 @@ export class SearchService implements SearchServiceAbstraction {
     filter: ((cipher: C) => boolean) | ((cipher: C) => boolean)[] = null,
     ciphers: C[],
   ): Promise<C[]> {
+    this._isCipherSearching$.next(true);
     const results: C[] = [];
     const searchStartTime = performance.now();
     if (query != null) {
@@ -243,6 +250,7 @@ export class SearchService implements SearchServiceAbstraction {
     }
 
     if (!(await this.isSearchable(userId, query))) {
+      this._isCipherSearching$.next(false);
       return ciphers;
     }
 
@@ -258,6 +266,7 @@ export class SearchService implements SearchServiceAbstraction {
       // Fall back to basic search if index is not available
       const basicResults = this.searchCiphersBasic(ciphers, query);
       this.logService.measure(searchStartTime, "Vault", "SearchService", "basic search complete");
+      this._isCipherSearching$.next(false);
       return basicResults;
     }
 
@@ -293,6 +302,7 @@ export class SearchService implements SearchServiceAbstraction {
       });
     }
     this.logService.measure(searchStartTime, "Vault", "SearchService", "search complete");
+    this._isCipherSearching$.next(false);
     return results;
   }
 
@@ -335,8 +345,10 @@ export class SearchService implements SearchServiceAbstraction {
   }
 
   searchSends(sends: SendView[], query: string) {
+    this._isSendSearching$.next(true);
     query = SearchService.normalizeSearchQuery(query.trim().toLocaleLowerCase());
     if (query === null) {
+      this._isSendSearching$.next(false);
       return sends;
     }
     const sendsMatched: SendView[] = [];
@@ -359,6 +371,7 @@ export class SearchService implements SearchServiceAbstraction {
         lowPriorityMatched.push(s);
       }
     });
+    this._isSendSearching$.next(false);
     return sendsMatched.concat(lowPriorityMatched);
   }
 

libs/common/src/vault/utils/skeleton-loading.operator.spec.ts

@@ -0,0 +1,109 @@
+import { BehaviorSubject } from "rxjs";
+
+import { skeletonLoadingDelay } from "./skeleton-loading.operator";
+
+describe("skeletonLoadingDelay", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
+  it("returns false immediately when starting with false", () => {
+    const source$ = new BehaviorSubject<boolean>(false);
+    const results: boolean[] = [];
+
+    source$.pipe(skeletonLoadingDelay()).subscribe((value) => results.push(value));
+
+    expect(results).toEqual([false]);
+  });
+
+  it("waits 1 second before returning true when starting with true", () => {
+    const source$ = new BehaviorSubject<boolean>(true);
+    const results: boolean[] = [];
+
+    source$.pipe(skeletonLoadingDelay()).subscribe((value) => results.push(value));
+
+    expect(results).toEqual([]);
+
+    jest.advanceTimersByTime(999);
+    expect(results).toEqual([]);
+
+    jest.advanceTimersByTime(1);
+    expect(results).toEqual([true]);
+  });
+
+  it("cancels if source becomes false before show delay completes", () => {
+    const source$ = new BehaviorSubject<boolean>(true);
+    const results: boolean[] = [];
+
+    source$.pipe(skeletonLoadingDelay()).subscribe((value) => results.push(value));
+
+    jest.advanceTimersByTime(500);
+    source$.next(false);
+
+    expect(results).toEqual([false]);
+
+    jest.advanceTimersByTime(1000);
+    expect(results).toEqual([false]);
+  });
+
+  it("delays hiding if minimum display time has not elapsed", () => {
+    const source$ = new BehaviorSubject<boolean>(true);
+    const results: boolean[] = [];
+
+    source$.pipe(skeletonLoadingDelay()).subscribe((value) => results.push(value));
+
+    jest.advanceTimersByTime(1000);
+    expect(results).toEqual([true]);
+
+    source$.next(false);
+
+    expect(results).toEqual([true]);
+
+    jest.advanceTimersByTime(1000);
+    expect(results).toEqual([true, false]);
+  });
+
+  it("handles rapid true->false->true transitions", () => {
+    const source$ = new BehaviorSubject<boolean>(true);
+    const results: boolean[] = [];
+
+    source$.pipe(skeletonLoadingDelay()).subscribe((value) => results.push(value));
+
+    jest.advanceTimersByTime(500);
+    expect(results).toEqual([]);
+
+    source$.next(false);
+    expect(results).toEqual([false]);
+
+    source$.next(true);
+
+    jest.advanceTimersByTime(999);
+    expect(results).toEqual([false]);
+
+    jest.advanceTimersByTime(1);
+    expect(results).toEqual([false, true]);
+  });
+
+  it("allows for custom timings", () => {
+    const source$ = new BehaviorSubject<boolean>(true);
+    const results: boolean[] = [];
+
+    source$.pipe(skeletonLoadingDelay(1000, 2000)).subscribe((value) => results.push(value));
+
+    jest.advanceTimersByTime(1000);
+    expect(results).toEqual([true]);
+
+    source$.next(false);
+
+    jest.advanceTimersByTime(1999);
+    expect(results).toEqual([true]);
+
+    jest.advanceTimersByTime(1);
+    expect(results).toEqual([true, false]);
+  });
+});

libs/common/src/vault/utils/skeleton-loading.operator.ts

@@ -0,0 +1,59 @@
+import { defer, Observable, of, timer } from "rxjs";
+import { map, switchMap, tap } from "rxjs/operators";
+
+/**
+ * RxJS operator that adds skeleton loading delay behavior.
+ *
+ * - Waits 1 second before showing (prevents flashing for quick loads)
+ * - Ensures skeleton stays visible for at least 1 second once shown regardless of the source observable emissions
+ * - After the minimum display time, if the source is still true, continues to emit true until the source becomes false
+ * - False can only be emitted either:
+ *   - Immediately when the source emits false before the skeleton is shown
+ *   - After the minimum display time has passed once the skeleton is shown
+ */
+export function skeletonLoadingDelay(
+  showDelay = 1000,
+  minDisplayTime = 1000,
+): (source: Observable<boolean>) => Observable<boolean> {
+  return (source: Observable<boolean>) => {
+    return defer(() => {
+      let skeletonShownAt: number | null = null;
+
+      return source.pipe(
+        switchMap((shouldShow): Observable<boolean> => {
+          if (shouldShow) {
+            if (skeletonShownAt !== null) {
+              return of(true); // Already shown, continue showing
+            }
+
+            // Wait for delay, then mark the skeleton as shown and emit true
+            return timer(showDelay).pipe(
+              tap(() => {
+                skeletonShownAt = Date.now();
+              }),
+              map(() => true),
+            );
+          } else {
+            if (skeletonShownAt === null) {
+              // Skeleton not shown yet, can emit false immediately
+              return of(false);
+            }
+
+            // Skeleton shown, ensure minimum display time has passed
+            const elapsedTime = Date.now() - skeletonShownAt;
+            const remainingTime = Math.max(0, minDisplayTime - elapsedTime);
+
+            // Wait for remaining time to ensure minimum display time
+            return timer(remainingTime).pipe(
+              tap(() => {
+                // Reset the shown timestamp
+                skeletonShownAt = null;
+              }),
+              map(() => false),
+            );
+          }
+        }),
+      );
+    });
+  };
+}