throttleTime does not throttle when the pipe emits a second time synchronously - is there a better way of coding this?

[delbertooo]

I wanted to use throttle time to reload something every once in a while. By doing so, I found that if the pipe includes something after throttleTime that also emits into it's source synchronously, then throttleTime isn't throttling (yet).

Example

For example, I've got a Worker: (see StackBlitz for the full code)

class Worker {
  // ability to track worker activity
  activity$ = new Subject<void>();

  foo(): Observable<string> {
    this.activity$.next(); // register worker activity
    return of('foo').pipe(delay(250)); // some async result
  }

  bar(): Observable<string> {
    this.activity$.next(); // register worker activity
    return of('bar').pipe(delay(250)); // some async result
  }
}

And now I'll use rxjs to reload (call) Worker#bar on each worker activity, but not more than once every second:

const worker = new Worker();

const reloadBarThrottled$ = worker.activity$.pipe(
  throttleTime(1000),
  tap(() => console.log('reloading bar...')),
  concatMap(() => worker.bar())
);

reloadBarThrottled$.subscribe();

Now, when I'm using the worker, the throttling works fine but "reloading bar..." is logged twice on each reload and side-effects (calling bar()) are called twice:

console.log('using worker (after 0 secs)'); // triggers reload
worker.foo().subscribe();
// log: reloading bar...
// log: reloading bar...

setTimeout(() => {
  console.log('using worker (after 0.5 secs)'); // shouldn't trigger reload
  worker.foo().subscribe();
}, 500);

setTimeout(() => {
  console.log('using worker (after 3 secs)'); // triggers reload
  worker.foo().subscribe();
  // log: reloading bar...
  // log: reloading bar...
}, 3000);

The problem seems to be, that the second emit of activity$ is triggered synchronously and maybe before the throttling is set-up (?). The only way I found to work around this was to force the subsequent activity to be asynchronous by using a delay:

const worker = new Worker();

const reloadBarThrottled$ = worker.activity$.pipe(
  throttleTime(1000),
  tap(() => console.log('reloading bar...')),
  delay(0), // ⭐️
  concatMap(() => worker.bar())
);

reloadBarThrottled$.subscribe();

(Another way would be using trailing: true, but this isn't a great behaviour for my reloading logic because of the delay.)

My main question

Is this a bug? Is it just an side-effect because there is a better way of coding this in a reactive way? Then which way is it? Are there other ways of working around this issue?