Iglistkit: All cells disappear when update while scrolling

[cemonet]

New issue checklist

• [x] I have reviewed the README and documentation
• [x] I have searched existing issues and this is not a duplicate

General information

• IGListKit version: 3.3.0
• iOS version(s): All
• CocoaPods/Carthage version: CocoaPods 1.4.0
• Xcode version: 9.3
• Devices/Simulators affected: All
• Reproducible in the demo project? (Yes/No): Yes -> https://github.com/cemonet/IGListKit-Demo-Issue
• Related issues: No

I’m using IGListKit on a long list with few insert/delete every seconds. I’ve noticed that all the cells quickly disappear when I'm scrolling and changing the scroll direction (at top or bottom of the list) while an update occurred.

• Please find a video showing the issue:
  https://www.youtube.com/watch?v=eD3msN0Enko
  _You can see red background where cells disappear_

• Please find source code of the demo video:
  https://github.com/cemonet/IGListKit-Demo-Issue

Thanks for your help.

Debug information

(lldb) po IGListDebugger.dump()
IGListAdapter 0x1d0185480:
Updater type: IGListAdapterUpdater
Data source: <IGListKit_Demo_Issue.ViewController: 0x105d11020>
Collection view delegate: (null)
Scroll view delegate: (null)
Is in update block: No
View controller: <IGListKit_Demo_Issue.ViewController: 0x105d11020>
Is prefetching enabled: No
Registered cell classes:
{(
  IGListKit_Demo_Issue.DemoCell\n)}
IGListAdapterUpdater instance 0x1d00dfcd0:
  Moves as deletes+inserts: No
  Allows background reloading: Yes
  Has queued reload data: No
  Queued update is animated: Yes
  State: Idle
Section map details:
  IGListBindingSectionController 0x1d0143d30:
Data source: <IGListKit_Demo_Issue.DemoSectionController: 0x1d0143d30>
Selection delegate: (null)
Object: <IGListKit_Demo_Issue.DemoSectionModel: 0x1d000f840>
View models:
<IGListKit_Demo_Issue.DemoModel: 0x1c82631c0>: 0
<IGListKit_Demo_Issue.DemoModel: 0x1c8262740>: 1
<IGListKit_Demo_Issue.DemoModel: 0x1c8261280>: 4
<IGListKit_Demo_Issue.DemoModel: 0x1c8262840>: 5
<IGListKit_Demo_Issue.DemoModel: 0x1c82627c0>: 6
<IGListKit_Demo_Issue.DemoModel: 0x1c8262040>: 7
<IGListKit_Demo_Issue.DemoModel: 0x1c8260980>: 8
<IGListKit_Demo_Issue.DemoModel: 0x1c82621c0>: 9
<IGListKit_Demo_Issue.DemoModel: 0x1c8262140>: 10
<IGListKit_Demo_Issue.DemoModel: 0x1c82622c0>: 11
<IGListKit_Demo_Issue.DemoModel: 0x1c8260a80>: 12
<IGListKit_Demo_Issue.DemoModel: 0x1c8263480>: 13
<IGListKit_Demo_Issue.DemoModel: 0x1c8262700>: 14
<IGListKit_Demo_Issue.DemoModel: 0x1c82633c0>: 15
<IGListKit_Demo_Issue.DemoModel: 0x1c8263340>: 16
<IGListKit_Demo_Issue.DemoModel: 0x1c82632c0>: 17
<IGListKit_Demo_Issue.DemoModel: 0x1c8263240>: 18
<IGListKit_Demo_Issue.DemoModel: 0x1c8263140>: 19
<IGListKit_Demo_Issue.DemoModel: 0x1c82630c0>: 20
<IGListKit_Demo_Issue.DemoModel: 0x1c8263040>: 21
<IGListKit_Demo_Issue.DemoModel: 0x1c8262fc0>: 22
<IGListKit_Demo_Issue.DemoModel: 0x1c8262f40>: 23
<IGListKit_Demo_Issue.DemoModel: 0x1c8262ec0>: 24
<IGListKit_Demo_Issue.DemoModel: 0x1c8262e40>: 25
<IGListKit_Demo_Issue.DemoModel: 0x1c8262dc0>: 26
<IGListKit_Demo_Issue.DemoModel: 0x1c8262d40>: 27
<IGListKit_Demo_Issue.DemoModel: 0x1c8262cc0>: 28
<IGListKit_Demo_Issue.DemoModel: 0x1c8262b40>: 29
<IGListKit_Demo_Issue.DemoModel: 0x1c8262a40>: 31
<IGListKit_Demo_Issue.DemoModel: 0x1c82629c0>: 32
<IGListKit_Demo_Issue.DemoModel: 0x1c8262940>: 33
<IGListKit_Demo_Issue.DemoModel: 0x1c82620c0>: 35
<IGListKit_Demo_Issue.DemoModel: 0x1c8262100>: 36
<IGListKit_Demo_Issue.DemoModel: 0x1c8262280>: 37
<IGListKit_Demo_Issue.DemoModel: 0x1c8262440>: 39
<IGListKit_Demo_Issue.DemoModel: 0x1c8262540>: 40
<IGListKit_Demo_Issue.DemoModel: 0x1c82625c0>: 42
<IGListKit_Demo_Issue.DemoModel: 0x1c8262600>: 43
<IGListKit_Demo_Issue.DemoModel: 0x1c8262640>: 44
<IGListKit_Demo_Issue.DemoModel: 0x1c82626c0>: 45
<IGListKit_Demo_Issue.DemoModel: 0x1c8262780>: 47
<IGListKit_Demo_Issue.DemoModel: 0x1c8262800>: 48
<IGListKit_Demo_Issue.DemoModel: 0x1c8262880>: 49
<IGListKit_Demo_Issue.DemoModel: 0x1c8262900>: 50
Number of items: 44
View controller: <IGListKit_Demo_Issue.ViewController: 0x105d11020>
Collection context: <IGListAdapter: 0x1d0185480>
Section: 0
Is first section: Yes
Is last section: Yes
Supplementary view source: (null)
Display delegate: (null)
Working range delegate: (null)
Scroll delegate: (null)
Collection view details:
  Class: UICollectionView, instance: 0x106838a00
  Data source: <IGListAdapter: 0x1d0185480>
  Delegate: <IGListAdapter: 0x1d0185480>
  Layout: <IGListCollectionViewLayout: 0x105d11980>
  Frame: {{0, 50}, {375, 712}}, bounds: {{0, 0}, {375, 712}}
  Number of sections: 1
    44 items in section 0
  Visible cell details:
    Visible cell at section 0, item 0:
    <IGListKit_Demo_Issue.DemoCell: 0x105a26900; baseClass = UICollectionViewCell; frame = (0 0; 375 50); layer = <CALayer: 0x1d423b140>>
    Visible cell at section 0, item 1:
    <IGListKit_Demo_Issue.DemoCell: 0x105a1cd80; baseClass = UICollectionViewCell; frame = (0 50; 375 50); layer = <CALayer: 0x1d423a8a0>>
    Visible cell at section 0, item 2:
    <IGListKit_Demo_Issue.DemoCell: 0x105a21600; baseClass = UICollectionViewCell; frame = (0 100; 375 50); layer = <CALayer: 0x1d4238620>>
    Visible cell at section 0, item 3:
    <IGListKit_Demo_Issue.DemoCell: 0x105a20390; baseClass = UICollectionViewCell; frame = (0 150; 375 50); layer = <CALayer: 0x1d4237d80>>
    Visible cell at section 0, item 4:
    <IGListKit_Demo_Issue.DemoCell: 0x10ba0e380; baseClass = UICollectionViewCell; frame = (0 200; 375 50); layer = <CALayer: 0x1c403fba0>>
    Visible cell at section 0, item 5:
    <IGListKit_Demo_Issue.DemoCell: 0x105a185d0; baseClass = UICollectionViewCell; frame = (0 250; 375 50); layer = <CALayer: 0x1d4234620>>
    Visible cell at section 0, item 6:
    <IGListKit_Demo_Issue.DemoCell: 0x105a1e1f0; baseClass = UICollectionViewCell; frame = (0 300; 375 50); layer = <CALayer: 0x1d4236c40>>
    Visible cell at section 0, item 7:
    <IGListKit_Demo_Issue.DemoCell: 0x105a1d180; baseClass = UICollectionViewCell; frame = (0 350; 375 50); layer = <CALayer: 0x1d4236640>>
    Visible cell at section 0, item 8:
    <IGListKit_Demo_Issue.DemoCell: 0x10ba10e60; baseClass = UICollectionViewCell; frame = (0 400; 375 50); layer = <CALayer: 0x1c4220ce0>>
    Visible cell at section 0, item 9:
    <IGListKit_Demo_Issue.DemoCell: 0x105a1bd10; baseClass = UICollectionViewCell; frame = (0 450; 375 50); layer = <CALayer: 0x1d4235b20>>
    Visible cell at section 0, item 10:
    <IGListKit_Demo_Issue.DemoCell: 0x10ba0d1b0; baseClass = UICollectionViewCell; frame = (0 500; 375 50); layer = <CALayer: 0x1c403f800>>
    Visible cell at section 0, item 11:
    <IGListKit_Demo_Issue.DemoCell: 0x10ba0fdf0; baseClass = UICollectionViewCell; frame = (0 550; 375 50); layer = <CALayer: 0x1c4220440>>
    Visible cell at section 0, item 12:
    <IGListKit_Demo_Issue.DemoCell: 0x105a24ba0; baseClass = UICollectionViewCell; frame = (0 600; 375 50); layer = <CALayer: 0x1d423a000>>
    Visible cell at section 0, item 13:
    <IGListKit_Demo_Issue.DemoCell: 0x105a1aaa0; baseClass = UICollectionViewCell; frame = (0 650; 375 50); layer = <CALayer: 0x1d4235780>>
    Visible cell at section 0, item 14:
    <IGListKit_Demo_Issue.DemoCell: 0x105a23870; baseClass = UICollectionViewCell; frame = (0 700; 375 50); layer = <CALayer: 0x1d4239760>>

[cemonet]

It looks like there's the same issue on Instagram feed

Please find a video showing the issue on Instagram:
https://www.youtube.com/watch?v=mX3iPJyoloU

[cemonet]

@rnystrom any news on the issue? Let me know if you need more information. Thanks 🙏

[rnystrom]

@cemonet I'm almost certain that this is a UICollectionView issue where you're scrolling while also in the middle of an animated batch update. The UICV is updating its cells to/from, but the scroll changes the bounds, and the UICV doesn't have cells to animate in the new bounds.

You might want to try updating w/out animations.

An experimental feature we've been kicking around is having updates delay until scrolling/dragging comes to a halt, but we're not totally sold on that user experience yet.

[cemonet]

@rnystrom Thank you for your answer,

We also tried to delay updates during scroll but the UICV massive update at the end of the scroll is a really bad UX.

As you suggested, I tried to remove the animations during the scroll, but it seems that IGListKit already delay updates during scroll - as long as we do not change direction at the top or bottom of the scroll - do you know how to disable this?

[zhubofei]

This issue sometimes happens when I receive a new message while scrolling in iMessage. So definitely a UICollectionView issue.

[rnystrom]

@cemonet we don’t do any delay while scrolling yet. We coalesce updates so that we can catch a lot of them into one (that’s why there’s an async in there).

Not sure I follow the changing direction part. Can you clarify?

I’m leaning towards closing this issue since it’s a complication of UICV internals and we aren’t prioritizing fixing it at this time.

_{Sent with GitHawk}

[cemonet]

@rnystrom Thanks again for your answer! Not sure on how you can help on this issue too..

While I’m scrolling my UICV and reaching the top/bottom of the feed, scrollViewDidEndDecelerating is called while I’m still scrolling. That causes all cells to disappear.

My UX looks so glitchy with this behavior. Do you think that using Texture can avoid this?

_{Sent with GitHawk}

[rnystrom]

Texture still uses UICollectionView, so it’ll still happen.

We did just add some scrolling state detection to the collection context, that might help?

There are also some experimental fixes to coalesce longer. Maybe try setting that to 20ms and see if that helps batch more updates?

Lastly if t continues to be an issue, I’d re-examine the frequency of your updates. Maybe they can be further batched in your implementation?

Unfortunately I’m going to close this since it’s something we aren’t going to fix in the framework itself.

_{Sent with GitHawk}