Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implementing Pagination while rendering examples #2952

Open
Keshav-0907 opened this issue Jan 24, 2024 · 8 comments · May be fixed by #2969
Open

Implementing Pagination while rendering examples #2952

Keshav-0907 opened this issue Jan 24, 2024 · 8 comments · May be fixed by #2969

Comments

@Keshav-0907
Copy link
Contributor

Keshav-0907 commented Jan 24, 2024

Increasing Access

Implementing pagination can enhance accessibility by :

  • Improving load times,
  • Enabling keyboard navigation
  • Ensuring screen reader compatibility
  • Enhancing compatibility with assistive technologies
  • Providing better scalability
  • Optimising for mobile devices,

Feature request details

Their should be pagination in the examples page, with a particular number of examples rendered each time

Screen.Recording.2024-01-24.at.10.24.44.PM.mov

I want to Work on this issue

@lindapaiste
Copy link
Collaborator

lindapaiste commented Jan 24, 2024

This has been raised before in #1814. Which is still open so I guess we want to do it? @raclim

A related thing that we might want to think about is returning only the essential data from the API. That is, don't include the files array on the the project list/search endpoint. If we do that then we would have to add/update some other API calls where we do need that information. So it's not a tiny thing, but possibly worth doing?

@Keshav-0907
Copy link
Contributor Author

@lindapaiste, Regarding the idea of returning only essential data from the API, I understand it might involve some changes in other API calls. However, I believe it's worth considering for optimization, especially if it enhances the overall performance of the system.

To tackle these issues, I propose :

  • Pagination Implementation
  • API Data Optimization

Let's discuss how we can proceed with both the pagination and the optimization of API data. Any specific steps or considerations you have in mind for addressing these issues? @raclim, do you have any thoughts on this as well?

@raclim
Copy link
Collaborator

raclim commented Jan 25, 2024

@lindapaiste @Keshav-0907 I personally do prefer pagination over scrolling in general, but I'm not sure what the general consensus about it is! This does seem a larger feature that might also benefit more from communal input/testing during development.

@DrizzyOVO
Copy link

Hi @lindapaiste @raclim, I implemented pagination to the sketches section. Hope y'all review it. Thank you.

@lindapaiste
Copy link
Collaborator

@lindapaiste @Keshav-0907 I personally do prefer pagination over scrolling in general, but I'm not sure what the general consensus about it is! This does seem a larger feature that might also benefit more from communal input/testing during development.

I'm team scrolling! I would do a lazy-load where it renders the first n items initially, then every time you hit the bottom it adds in the next n. But that's just my opinion. @Keshav-0907 raised some concerns regarding screen reader navigation and I'm honestly not too knowledgeable about that area.

@Keshav-0907
Copy link
Contributor Author

I don't have a strong preference between Lazy Scrolling and Pagination. However, considering the limited number of examples we have, I personally think implementing pagination should be preferred. I believe @raclim could offer valuable insights on the best approach for this situation.

@DrizzyOVO DrizzyOVO linked a pull request Jan 27, 2024 that will close this issue
4 tasks
@DrizzyOVO
Copy link

I apologize for closing the pull request previously, there were some errors I was facing in my local codebase. But this is the final pull request that can solve the issue. Thank you.

@raclim
Copy link
Collaborator

raclim commented Jan 30, 2024

Hmm @lindapaiste @Keshav-0907 I think scrolling might not be the best accessibility wise—these two articles by the Bureau of Internet Accessibility and Digital A11y provide some reasons why (though they mostly apply to 'infinite scrolling' over scrolling in general, which might be slightly different?) I think the second article also links to a good checklist that can serve as a starting point for confirming if we've met certain accessibility criteria in these types of elements.

This is going a little off topic, but I saw some articles discuss this and think it could also be interesting to explore what a satisfying, accessible scrolling implementation could look like!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants