[Bug] Feed screen layout overlap when ErrorBar appears

[rajeev-k47]

Bug
When a network error happens on the Feed screen, an ErrorBar shows up above the feed. When this appears, the header section becomes taller (TopBar + ErrorBar + NavigationChips), but the feed list below does not shift properly. Because of this, the feed cards move up and overlap the header area.

Steps to Reproduce => Open the Feed screen first with network, then turn off network and pull refresh, when the ErrorBar appears, look at the first few feed items.

Cause
The feed list currently uses a fixed spacer (StartingSpacer) at the top to account for the header height. When the ErrorBar appears, the header becomes taller but the spacer stays the same height, which causes the overlap.

[javaman97]

@rajeev-k47 I try to reproduce the same issue following the same steps, but I did not find it as a bug as it is not overlapping.

feed_no_overlap.mp4

[rajeev-k47]

@rajeev-k47 I try to reproduce the same issue following the same steps, but I did not find it as a bug as it is not overlapping.

Hey @javaman97, I think the issue is actually visible in the screen recording you shared as well. When the ErrorBar appears at 8 sec. frame, the header area becomes taller because of that, the feed tiles move downwards overlapping the feed content. Refer the arrow in the screenshot attached from your screen recording (Feed tiles overlapping the background content.)

You can also check the changes in the PR. That should make it clearer what issue I’m referring to and how the fix addresses it.

[javaman97]

@rajeev-k47 That I understood when I look into PR but overlapping becomes normal when same Error Bar disappears after few seconds. BTW, Thanks for the contribution that improves our LB app.

One thing I also learn that we can start working on our own bug as soon as we report it, making a Draft PR is more ideal way. Isn't ?