Skip to content

Conversation

@joshdayorg
Copy link

Summary

Fixes #23

The Problem

When loading the app, the sidebar shows blank white space for 3+ seconds while content loads. This makes the page look broken, as described in the issue.

The Solution

Add a loading skeleton that appears immediately while the sidebar content loads asynchronously. The skeleton mimics the sidebar structure:

  • Direct messages row (5 avatar placeholders)
  • Search input placeholder
  • "My Rooms" section (heading + 4 room placeholders)
  • "All Rooms" section (heading + 6 room placeholders)

Implementation

Uses the same pattern as accounts/users/_next_page_container.html.erb:

  1. When sidebar_turbo_frame_tag is called with src: and no block, render the skeleton
  2. Turbo automatically replaces skeleton with real content when loaded

Changes

  • app/views/users/sidebars/_loading_skeleton.html.erb - New skeleton partial
  • app/helpers/users/sidebar_helper.rb - Render skeleton when src provided
  • app/assets/stylesheets/application/sidebar.css - Skeleton styles with pulse animation

Browser Support

Uses CSS variables already defined in the codebase. Animation works in all modern browsers.

Testing

  • Full page refresh shows skeleton immediately
  • Skeleton replaced by real sidebar when loaded
  • No layout shift between skeleton and content
  • Works on mobile and desktop

Shows a pulsing skeleton placeholder while sidebar content loads,
replacing the blank space that previously appeared for 3+ seconds.

- Add _loading_skeleton.html.erb partial matching sidebar structure
- Modify sidebar_turbo_frame_tag to render skeleton when src is provided
- Add skeleton CSS with pulse animation using existing CSS variables
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.

Rooms sidebar takes over 3 seconds to load on full refresh

1 participant