{"action":"created","issue":{"url":"https://api.github.com/repos/ionic-team/ionic/issues/17540","repository_url":"https://api.github.com/repos/ionic-team/ionic","labels_url":"https://api.github.com/repos/ionic-team/ionic/issues/17540/labels{/name}","comments_url":"https://api.github.com/repos/ionic-team/ionic/issues/17540/comments","events_url":"https://api.github.com/repos/ionic-team/ionic/issues/17540/events","html_url":"https://github.com/ionic-team/ionic/issues/17540","id":412217057,"node_id":"MDU6SXNzdWU0MTIyMTcwNTc=","number":17540,"title":"Virtual scroll flickering when we update it with new data","user":{"login":"roopeshreddy","id":1386644,"node_id":"MDQ6VXNlcjEzODY2NDQ=","avatar_url":"https://avatars3.githubusercontent.com/u/1386644?v=4","gravatar_id":"","url":"https://api.github.com/users/roopeshreddy","html_url":"https://github.com/roopeshreddy","followers_url":"https://api.github.com/users/roopeshreddy/followers","following_url":"https://api.github.com/users/roopeshreddy/following{/other_user}","gists_url":"https://api.github.com/users/roopeshreddy/gists{/gist_id}","starred_url":"https://api.github.com/users/roopeshreddy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/roopeshreddy/subscriptions","organizations_url":"https://api.github.com/users/roopeshreddy/orgs","repos_url":"https://api.github.com/users/roopeshreddy/repos","events_url":"https://api.github.com/users/roopeshreddy/events{/privacy}","received_events_url":"https://api.github.com/users/roopeshreddy/received_events","type":"User","site_admin":false},"labels":[{"id":835668554,"node_id":"MDU6TGFiZWw4MzU2Njg1NTQ=","url":"https://api.github.com/repos/ionic-team/ionic/labels/triage","name":"triage","color":"F5D230","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":9,"created_at":"2019-02-20T02:40:47Z","updated_at":"2019-05-31T22:02:35Z","closed_at":null,"author_association":"NONE","body":"\r\n# Bug Report\r\n\r\n**Ionic version:**\r\n\r\n[x] **4.0.0**\r\n\r\n**Current behavior:**\r\nWe've a scenario in our app. We load the cached data from the local store and when we receive the latest data from server, we will update the list.\r\n\r\nSo when we're doing this, the page is flickering when update happens. I understand that when we set the data it may flicker, but `trackBy` option should solve this, which is not happening.\r\n \r\n**Expected behavior:**\r\nIt should not flicker when we update the list with the latest data. \r\n\r\n**Steps to reproduce:**\r\nAdd a `viritual-scroll` to a page and initialize with some items and update the list with new set of data.\r\n\r\n**Related code:**\r\n\r\n[https://github.com/roopeshreddy/virtual-scroll-issue](https://github.com/roopeshreddy/virtual-scroll-issue)\r\n\r\n```\r\n<ion-virtual-scroll [items]=\"items\" [trackBy]=\"trackByFn\">\r\n    <ion-item *virtualItem=\"let item\">\r\n      <ion-icon [name]=\"item.icon\" slot=\"start\"></ion-icon>\r\n      {{ item.title }}\r\n      <div class=\"item-note\" slot=\"end\">\r\n        {{ item.note }}\r\n      </div>\r\n    </ion-item>\r\n  </ion-virtual-scroll>\r\n```\r\n\r\n**Other information:**\r\n\r\nWe've tried the same in Chrome browser, iOS simulator and real iPhone 7 device.\r\n\r\n**Ionic info:**\r\n\r\n```\r\nIonic:\r\n\r\n   ionic (Ionic CLI)             : 4.10.3 (/usr/local/lib/node_modules/ionic)\r\n   Ionic Framework               : @ionic/angular 4.0.1\r\n   @angular-devkit/build-angular : 0.12.4\r\n   @angular-devkit/schematics    : 7.2.4\r\n   @angular/cli                  : 7.2.4\r\n   @ionic/angular-toolkit        : 1.4.0\r\n\r\nSystem:\r\n\r\n   NodeJS : v10.15.0 (/usr/local/bin/node)\r\n   npm    : 6.5.0\r\n   OS     : macOS Mojave\r\n```\r\n"},"comment":{"url":"https://api.github.com/repos/ionic-team/ionic/issues/comments/497873911","html_url":"https://github.com/ionic-team/ionic/issues/17540#issuecomment-497873911","issue_url":"https://api.github.com/repos/ionic-team/ionic/issues/17540","id":497873911,"node_id":"MDEyOklzc3VlQ29tbWVudDQ5Nzg3MzkxMQ==","user":{"login":"narhc8","id":29511609,"node_id":"MDQ6VXNlcjI5NTExNjA5","avatar_url":"https://avatars0.githubusercontent.com/u/29511609?v=4","gravatar_id":"","url":"https://api.github.com/users/narhc8","html_url":"https://github.com/narhc8","followers_url":"https://api.github.com/users/narhc8/followers","following_url":"https://api.github.com/users/narhc8/following{/other_user}","gists_url":"https://api.github.com/users/narhc8/gists{/gist_id}","starred_url":"https://api.github.com/users/narhc8/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/narhc8/subscriptions","organizations_url":"https://api.github.com/users/narhc8/orgs","repos_url":"https://api.github.com/users/narhc8/repos","events_url":"https://api.github.com/users/narhc8/events{/privacy}","received_events_url":"https://api.github.com/users/narhc8/received_events","type":"User","site_admin":false},"created_at":"2019-05-31T22:02:35Z","updated_at":"2019-05-31T22:02:35Z","author_association":"NONE","body":"Having the same issue here, where in my case the ion-cards are flickering around and not staying static with the scroll. Has anyone found a workaround or solution? I moved over from ngFor due to performance issues with a large array.  "}}
{"actor":{"display_login":"narhc8"}}