Add pagination in list view of pages and post

[dhiraj-das]

Hi AXeL!

How have you been? I was able to fork your project and customise it to fit my project structure. However, one thing I found missing was pagination in the list view screens of both Posts and Pages.

I am working on this item for my project but was wondering if you could show me a way. I'll raise a pull request for this project as well.

Thanks!
Dhiraj

[AXeL-dev]

Hey Dhiraj,

I'm doing well, thanks for asking, i hope you're good as well.

However, one thing I found missing was pagination in the list view screens of both Posts and Pages.

I'm not sure if i get you, since pagination already exists on both pages you described (see the screenshot below).

[dhiraj-das]

Sorry by pagination I meant lazy loading

[dhiraj-das]

Right now I see all the documents are being fetched from firestore. I was thinking we can optimize it further by fetching only the first 10 docs first and then fetch the rest as and when the users clicks on the next page indicators.

[AXeL-dev]

Right now I see all the documents are being fetched from firestore. I was thinking we can optimize it further by fetching only the first 10 docs first and then fetch the rest as and when the users clicks on the next page indicators.

Indeed, currently the pagination is handled on the frontend side, which is not optimized, so yeah if you wanna go with lazy loading then you have to change the whole datatable component (i think, or maybe try to tweak it).

For the requests pagination you can use firestore query cursors => https://firebase.google.com/docs/firestore/query-data/query-cursors.

You can also find an example of lazy loading here ts, html.

I hope that helps 😄.

[dhiraj-das]

Thanks AXeL! You're the best! I think I have enough information to get started.

…

On Sat, May 29, 2021 at 10:54 PM AXeL ***@***.***> wrote: Right now I see all the documents are being fetched from firestore. I was thinking we can optimize it further by fetching only the first 10 docs first and then fetch the rest as and when the users clicks on the next page indicators. Indeed, currently the pagination is handled on the frontend side, which is not optimized, so yeah if you wanna go with lazy loading then you have to change the whole datatable component (i think, or maybe try to tweak it). For the requests pagination you can use firestore query cursors => https://firebase.google.com/docs/firestore/query-data/query-cursors. You can also find an example of lazy loading here ts <https://github.com/AXeL-dev/ur-frontend-coding-challenge/blob/f3ce45187913444d6e0f03b11ef9820dbd581f5e/src/app/app.component.ts#L31>, html <https://github.com/AXeL-dev/ur-frontend-coding-challenge/blob/f3ce45187913444d6e0f03b11ef9820dbd581f5e/src/app/app.component.html#L2> . I hope that helps 😄. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#25 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFRHNAK66PB3GSQM3CHRTQTTQEPNVANCNFSM45YOUAQA> .