I'm new to Observables; I have to convert a nested for loop with Observables and, when a condition is meet, wait for a certain amount of time.
I was able to convert the for-loop with Observables, but I don't reach to achieve the "pause" of the flow of 5 seconds after the globalCounter variable value is set to 5.
How to do it? Thanks.

import { map, Observable, Subject } from "rxjs";

const array1 = ["Alfa", "Beta", "Gamma"];
const array2 = ["Laura", "Valentina", "Cristina"];
const array3 = ["Red", "Green", "Blue"];

const mySubject = new Subject<number>();
let globalCounter = 0;

const myObservable1$ = new Observable<string>((observer1) => {
  array1.map((u) => {
    observer1.next(u);
  });
});

const pipeline1 = myObservable1$
  .pipe(
    map(async (value1) => {
      const return2 = await fObservable2(value1);
      return2.subscribe({});
    })
  )
  .subscribe();

async function fObservable2(value1: string) {
  return new Observable<string>((observer2) => {
    array2.map(async (d) => {
      const valueToPassTofObservable3 = value1 + " --- " + d;
      const return3 = await fObservable3(valueToPassTofObservable3);
      return3.subscribe({
        next: async (value3) => {
          console.log(
            `OBSERVABLE2 - value3: ${value3} - globalCounter: ${globalCounter}`
          );
        },
      });
    });
  });
}


async function fObservable3(value2: string) {
  let toBeReturn3;
  if (globalCounter === 5) {
    await sleep();
  }
  return new Observable<string>((observer3) => {
    array3.forEach((t) => {
      toBeReturn3 = t + " --- " + value2;
      observer3.next(toBeReturn3);
      mySubject.next(globalCounter++);
    });
  });


}

function sleep() {
  return new Promise((resolve) => {
    setInterval(() => {
      globalCounter = 0;
      resolve(true);
    }, 5000);
  });
}