bug(MatPaginator): Page event fires too late.

[Vallith]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

So when using a MatPaginator, there is an event you can bind to in order to tell when the page event has been clicked. However inside the source code (paginator.ts), that event is emitted at the end of the function:

_changePageSize(pageSize: number) {
    // Current page needs to be updated to reflect the new page size. Navigate to the page
    // containing the previous page's first item.
    const startIndex = this.pageIndex * this.pageSize;
    const previousPageIndex = this.pageIndex;

    this.pageIndex = Math.floor(startIndex / pageSize) || 0;
    this.pageSize = pageSize;
    this._emitPageEvent(previousPageIndex);
  }

This means that when using this page event you cannot do anything BEFORE the loading starts. I'm developing an app that uses rather large tables, and I want to be able to display a loading icon before the table starts updating so the app doesn't just hang. But when I show my loading icon in the (page) event, it only displays AFTER the table has finished updating and hangs for a long time. I've spent many hours trying to find a work around for this and haven't been able to figure anything out. Perhaps there is a reason as to why the line this._emitPageEvent(previousPageIndex); is here, but to my very amateurish eyes I feel like this could be solved by moving that line to the top.

Apologies in advance if this post doesn't follow the etiquette, I've not made many of these so I'm still learning.

Reproduction

Steps to reproduce:

1. Have a table with a very long dataset
2. Add a paginator
3. Bind the page event on the paginator
4. Have the page event do literally anything, let's say just write some text to the console
5. Change the page size on the paginator from the default 50 to the full table's length
6. Watch the console to see the app will hang until it finishes loading and only THEN do you see the text appear in the console.

Expected Behavior

I'd expect the page event to be fired first.

Actual Behavior

The page event is fired after.

Environment

• Angular: 14.1.0
• CDK/Material: 14.1.0
• Browser(s): Edge
• Operating System (e.g. Windows, macOS, Ubuntu): Windows