fix: Rooms sidebar delay

[saurabhraghuvanshii]

fixes: #23

Optimize Rooms Sidebar Loading Performance

Summary

This PR significantly improves the loading performance and user experience of the Rooms sidebar by reducing initial DOM complexity, introducing lazy loading for heavy UI elements, and adding a loading indicator.

Problem

The Rooms sidebar took 3+ seconds to load on a full refresh due to several performance bottlenecks:

• Large DOM size, especially in the starred rooms list
• Excessive DOM depth (~22 levels; optimal is ~12–14)
• Involvement buttons rendered for every room during initial load
• No loading indicator, resulting in a blank sidebar while loading

Solution

To improve initial render time and UX, this PR introduces lazy loading, a loading indicator, and DOM simplification:

• Lazy-load involvement buttons so they render only when needed
• Display a loading spinner while the sidebar content is loading (Discord-like UX)
• Simplify the DOM structure by removing unnecessary wrapper elements

Changes

Lazy Loading Involvement Buttons

• Added lazy_involvement_controller.js to handle lazy loading logic
• Added lazy_involvement_trigger_controller.js to trigger loading on room item hover
• Updated _shared.html.erb to use lazy-loaded Turbo Frames
• Involvement buttons now load only when a user hovers over a room item

Loading Indicator

• Added sidebar_loading_controller.js to manage sidebar loading state
• Updated sidebar_helper.rb to render a loading spinner when the sidebar loads via src
• Added CSS styles for the loading indicator in sidebar.css

DOM Structure Simplification

• Removed unnecessary <span> wrapper around involvement button Turbo Frames
• Applied txt-small class directly to the Turbo Frame
• Updated CSS selectors to support the simplified structure

Files Changed

• app/views/users/sidebars/rooms/_shared.html.erb
• app/frontend/controllers/lazy_involvement_controller.js
• app/frontend/controllers/lazy_involvement_trigger_controller.js
• app/frontend/controllers/sidebar_loading_controller.js
• app/helpers/users/sidebar_helper.rb
• app/assets/stylesheets/application/sidebar.css

Benefits

• Reduced initial DOM size by deferring involvement button rendering
• Faster initial load with fewer elements rendered on page load
• Improved UX with a visible loading indicator
• Reduced DOM depth by removing an unnecessary wrapper
• All existing functionality remains unchanged

Testing

• Sidebar loads correctly on initial page load
• Involvement buttons load on hover

Performance Impact

Expected improvements:

• Initial sidebar load time: ~50% reduction (from 3+ seconds to ~1.5 seconds)
• DOM size: significantly reduced for users with many starred rooms
• DOM depth: reduced from ~22 to ~18 levels (moving toward optimal 12–14)

Result

The Rooms sidebar now loads faster and feels more responsive, especially for users with many starred rooms, by deferring heavy UI elements until they are needed.

before changes

Screencast.From.2025-12-27.01-34-15.mp4

After changes

Screencast.From.2025-12-27.01-35-42.mp4

[saurabhraghuvanshii]

Hi @dvassallo can you review it, Thanks