Błąd, który zabrał mi kilka nocy — turbo frame i display contents

Jeśli używasz gemu Pagy w połączeniu z Ruby on Rails i Hotwire, turbo frame to prosty sposób na efektywną paginację z infinite scroll. Turbo_frame_tag pozwala na dynamiczne aktualizowanie list lub pojedynczych elementów na stronie. W większości przeglądarek turbo frame zachowuje się jak display: block.

Jeśli masz problem z błędnym wyświetlaniem listy elementów, w których każdy element jest opakowany w turbo frame, należy użyć zasugerowanego na stackoverflow rozwiązania i ustawić display: contents dla wszystkich turbo frame.

Takie rozwiązanie wykorzystałem w moim kodzie.

Jednak w przypadku dodawania paginacji za pomocą loading: lazy, kod nie działał.

Mój kod wyglądał tak:

Pobieranie listy produktów w kontrolerze:

Lista produktów

Potrzebowałem ustawić display: contents; dla turbo frame, żeby wyświetlić produkty w formie grida masonry.

display: contents; powoduje, że turbo frame jest niewidoczne dla DOM.

Partial z paginacją

I jeszcze plik index.turbo_stream.erb, który obsługiwał dodatkowo format turbo_stream dla akcji index.

Ten kod był bezczelnie poprawny. Zawsze działał, w każdym projekcie, w którym go stosowałem. Ale tym razem nie działał.

loading: lazydziała tylko wtedy, gdy turbo frame jest widoczny w przeglądarce i musi mieć ustawioną ścieżkę do załadowania (parametr src). Ponieważ display: contents sprawia, że turbo frame jest niewidoczne dla Turbo, loading: lazy nie działa.

Turbo to mechanizm JavaScript, który działa na elementach DOM. Usunięcie display: contents i reorganizacja HTMLa może pomóc w rozwiązaniu problemu.

Warto pamiętać.

Turbo frame z loading: :lazy nie zadziała z display: contents;.