How to throttle ngxs @Select observable

Question

I'm building an application using ngxs as my state manager. My app displays a feed of messages which are paginated, but all messages are in the state, which are about 1000 in my case. I have a selector which paginates the posts, but when the app initialy loads, I have a hugh perfomance drain, as the posts come in.

I tried something radical like this:

    this.currentFeedSettings = this
        .store
        .select(CurrentFeedSettingState)
        .pipe(
            throttleTime(10000),
        );

But some messages are shown almost instantly, but not after 10 seconds. Am I doing something wrong?

Answer 1

I would recommend the debounce operator.

debounce delays values emitted by the source Observable, but drops previous pending delayed emissions if a new value arrives on the source Observable. This operator keeps track of the most recent value from the source Observable, and spawns a duration Observable by calling the durationSelector function.

In your code, that would look like:

this.store
  .select(CurrentFeedSettingState)
  .pipe(debounceTime(100))
  .subscribe((res) => { ... });