Problem
The template catalog page loads the entire dataset of available templates to the client, and performs search, filtering, and tag matching client-side. As the template library grows, this increases the initial page bundle size, memory footprint, and slows down interaction.
Proposed Solution
Refactor the template retrieval:
- Implement query parameters on the API endpoint (e.g.,
/api/templates?search=...&tag=...&page=...)
-
- Perform search/filtering in the database query
-
- Use server actions or standard React
use hook to fetch filtered results from the server on query change
-
- Keep the list paginated (e.g., 20 templates per page)
Problem
The template catalog page loads the entire dataset of available templates to the client, and performs search, filtering, and tag matching client-side. As the template library grows, this increases the initial page bundle size, memory footprint, and slows down interaction.
Proposed Solution
Refactor the template retrieval:
/api/templates?search=...&tag=...&page=...)usehook to fetch filtered results from the server on query change