Skip to content

[fix] infinite scroll at resources page#1310

Open
rogefm wants to merge 1 commit intomainfrom
fix/infinite-scroll-resources
Open

[fix] infinite scroll at resources page#1310
rogefm wants to merge 1 commit intomainfrom
fix/infinite-scroll-resources

Conversation

@rogefm
Copy link
Contributor

@rogefm rogefm commented Mar 6, 2026

📝 Description

This PR refactors the layout and accessibility of the Resources panel in the webapp. The main structural change moves the page title ("Resources") and the action button ("Setup new Resource" / "Explore Resource Catalog") inside the panel component itself, introduces a sticky header for improved UX during scrolling, and replaces the shared infinite-scroll wrapper with per-tab lazy loading.

🔗 Related Issue

Fixes ENG-276

🚀 Type of Change

  • 🐛 Bug fix (non-breaking change which fixes an issue)
  • ✨ New feature (non-breaking change which adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • 📚 Documentation update
  • 🎨 Style/UI update
  • ♻️ Code refactor
  • ⚡ Performance improvement
  • ✅ Test update
  • 🔧 Build configuration change
  • 🧹 Chore

📋 Changes Made

  • webapp/src/webapp/app.cljs: Simplified the :resources-panel route definition — removed the outer padding/heading wrapper and delegated layout ownership to resources-main/panel. The outer Box now only provides bg-gray-1 min-h-full h-screen.
  • webapp/src/webapp/resources/main.cljs: Added a sticky header (sticky top-0 z-10 bg-gray-1) that contains the "Resources" heading, the action button, the tab switcher, and the search/filter controls, keeping them visible during scroll.
  • webapp/src/webapp/resources/main.cljs: Replaced the single shared infinite-scroll wrapping the entire component with individual infinite-scroll instances placed at the bottom of each tab's content block (resources and roles), so lazy loading is scoped per tab.
  • webapp/src/webapp/resources/main.cljs: Removed the unused current-state local binding and replaced h-full with min-h-96 on loading/empty state containers for more predictable rendering.

🧪 Testing

Test Configuration:

  • Browser(s): Chrome / Firefox
  • OS: Linux / macOS

Tests performed:

  • Unit tests pass
  • Integration tests pass
  • Manual testing completed

Verify that the sticky header remains fixed when scrolling through a long list of resources or roles. Confirm that infinite scroll triggers correctly and independently for each tab. Confirm the action button and title are visible and correctly positioned.

📸 Screenshots

Screen Recording 2026-03-06 at 10 40 27

✅ Checklist

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • My changes generate no new warnings
  • New and existing unit tests pass locally with my changes
  • I have checked my code and corrected any misspellings

@rogefm rogefm requested a review from luanlorenzo March 6, 2026 14:12
@rogefm rogefm self-assigned this Mar 6, 2026
@sandromello
Copy link
Contributor

✅ Build Completed with Success, Version=1310.0.0-8a427f6

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants