Smoothness issue with loading "category" rows, when using TableView scrollToY with time=0 (instant)

Has anyone tried this? It will only happen when transition time is set to instant.

Repro:

  • create table with some rows where category is set to true

  • scrollToY(somePositionY, time = 0)

It happens about half the time, but especially on device with slower loading. When I call scrollToY, the category row sometimes appears AFTER all normal rows have been rendered.

Is it possible to have the category rows render at same time other rows are rendered, instead of appearing suddenly out of nowhere? Or some other consistent manner even on slow devices?

In addition to the loading issue of category rows, even worse sometimes the appearance of a category row flickers between other category rows that I have added to the table which should NOT appear at all (they’re positioned outside the screen)

Can you provide code?

I’ll see if I can create a sample app to showcase this, I don’t know when I can do it though. Was hoping there’d be someone who has experienced this.

When scrollToY is used and I make it instant, is everything between starting position and scroll position rendered still?

Is there something I can use to go directly to a position without rendering anything else? Maybe that would make the rendering smoother for large TableViews or slower devices…

Don’t think it would deal with the way the category row is showing up though. At least for what I’m seeing

Ok I got simple sample that can be run with newProject blank file and copy pasted into main below.

I have scrollToY for when simulator is first opened, as well as when a row is pressed. Scrolling when a row is pressed could take some getting used to, but of course feel free to modify for your own tests. I prefer it over restarting the simulator all the time.

I’m creating the table and calling scrollToY immediately afterwards.

Two issues I wanted to point out, when using scrollToY:

  1. Sometimes “category 1” blinks a lot before appearing. Might have to fidget with the tests, such as scrolling away to allow re-rendering, a little to see this clearly.

  2. Sometimes the regular rows struggle to keep up with rendering, and the rows on the bottom half of the screen can be seen not being loaded yet and is all blank space

Any ideas on how to deal with these issues please

[lua]
local composer = require( “composer” )
local widget = require( “widget” )

function listRowRender( event )
local row = event.row

if row.params ~= nil and row.params.title ~= nil then
local rowTitle = display.newText( row.params.title, 0, 0, 280, 0, “Arial”, 14 )
rowTitle.anchorX = 0
rowTitle.x = 40–70
rowTitle.anchorY=0.5
rowTitle.y = row.contentHeight/1.5
rowTitle:setTextColor( 0,0,0 )
row:insert(rowTitle)
end
print(list:getContentPosition())
end

function listRowTouch( event )
list:scrollToY{y = -2800, time = 0}
end

function createTable()
list = widget.newTableView
{
top = 44,
width = 341,
height = display.contentHeight - 88,
left = -19,
maskFile = “myResource/mask-320x448.png”,
onRowRender = listRowRender,
onRowTouch = listRowTouch
}
populateTable()
end
function resetTable()
if list ~= nil then
list:removeSelf()
list = nil
end
createTable()
list:scrollToY{y = -2864, time = 0}
end

function populateTable()

list:insertRow{
rowHeight = 42,
isCategory = true,
params = { title = “Category1”}
}
for i = 1, 66, 1 do
list:insertRow{
rowHeight = 42,
isCategory = false,
params = { title = “row”}
}
end

list:insertRow{
rowHeight = 42,
isCategory = true,
params = { title = “Category2”}
}
for i = 1, 1111, 1 do
list:insertRow{
rowHeight = 42,
isCategory = false,
params = { title = “row”}
}
end

end

resetTable()[/lua]

Just a couple of things. First thank you for using code formatting in your post, however all indentions were lost along the way making it really hard to understand what you’re doing.  Around here we have a motto:  Help us, help you.  

In this case, you talk about a community developer or staff member creating a new project, editing main.lua and dropping your code into it. This may not seem like a big ask, but everyone here’s time is precious. On the other hand, you have a project already, complete with main.lua, config.lua and build.settings (hopefully with well-formatted code) and it’s much quicker for you to compress the project folder to a .zip file, upload that file to a place like Dropbox or Google drive or some other file sharing service and provide us a link to the .zip file.

Then we can just click on a link, have our browser extract the project to a folder and open it in the simulator and see what’s going on.  In addition, you reference an image/mask file that we don’t have so we would get an error just pasting your code into a project we create. Please help us by providing the entire project in a .zip file? 

Now all that said, without answering your question directly, why are you inserting almost 1200 rows into a tableView? Users are not going to scroll through thousands of lines in a tableView. It’s best to add a few rows (say under 100) and if you want to implement infinite scroll, add more rows when you reach the bottom. But even then you will be creating a very large in-memory data structure that will end up being fraught with performance issues. 

Category rows are special.  As you scroll, the current category row sticks to the top of the display, allowing other rows to float below the category row. This is an iOS behavior. As the next category row scrolls into position, it replaces the one that’s sticky.  These sticky rows have to be drawn on top. When scrolling with 0 transition time, you’re likely seeing this as a side-effect of this layering.

Rob

I’m not sure what happened to the indentations, the source I copied from had it but they went away when I pasted and saved it. I’ll keep that in mind next time, thank you. 

I see, thanks for clarifying. From my perspective I thought copying into main.lua would actually be easier to do, and assumed the blank project will be in the same state as what I have, so copy paste would work seamlessly. 

Here’s the zip for the project I tested with: https://www.dropbox.com/s/niwgup07a6h4uao/listtest.zip?dl=0

I wanted to add a bunch of rows to maybe make the blinking of the table more visible, as I create table and call scrollToY immediately afterwards, though I don’t think it made a significant difference to the result I was looking for. In my actual project, I don’t have nearly that many rows, and I was able to see this blinking with far less rows, around 40 rows added. 

I see… is there something I can do about the category row scrolling side effect?  Or I shouldn’t use instant scroll if category rows are used?

Can you provide code?

I’ll see if I can create a sample app to showcase this, I don’t know when I can do it though. Was hoping there’d be someone who has experienced this.

When scrollToY is used and I make it instant, is everything between starting position and scroll position rendered still?

Is there something I can use to go directly to a position without rendering anything else? Maybe that would make the rendering smoother for large TableViews or slower devices…

Don’t think it would deal with the way the category row is showing up though. At least for what I’m seeing

Ok I got simple sample that can be run with newProject blank file and copy pasted into main below.

I have scrollToY for when simulator is first opened, as well as when a row is pressed. Scrolling when a row is pressed could take some getting used to, but of course feel free to modify for your own tests. I prefer it over restarting the simulator all the time.

I’m creating the table and calling scrollToY immediately afterwards.

Two issues I wanted to point out, when using scrollToY:

  1. Sometimes “category 1” blinks a lot before appearing. Might have to fidget with the tests, such as scrolling away to allow re-rendering, a little to see this clearly.

  2. Sometimes the regular rows struggle to keep up with rendering, and the rows on the bottom half of the screen can be seen not being loaded yet and is all blank space

Any ideas on how to deal with these issues please

[lua]
local composer = require( “composer” )
local widget = require( “widget” )

function listRowRender( event )
local row = event.row

if row.params ~= nil and row.params.title ~= nil then
local rowTitle = display.newText( row.params.title, 0, 0, 280, 0, “Arial”, 14 )
rowTitle.anchorX = 0
rowTitle.x = 40–70
rowTitle.anchorY=0.5
rowTitle.y = row.contentHeight/1.5
rowTitle:setTextColor( 0,0,0 )
row:insert(rowTitle)
end
print(list:getContentPosition())
end

function listRowTouch( event )
list:scrollToY{y = -2800, time = 0}
end

function createTable()
list = widget.newTableView
{
top = 44,
width = 341,
height = display.contentHeight - 88,
left = -19,
maskFile = “myResource/mask-320x448.png”,
onRowRender = listRowRender,
onRowTouch = listRowTouch
}
populateTable()
end
function resetTable()
if list ~= nil then
list:removeSelf()
list = nil
end
createTable()
list:scrollToY{y = -2864, time = 0}
end

function populateTable()

list:insertRow{
rowHeight = 42,
isCategory = true,
params = { title = “Category1”}
}
for i = 1, 66, 1 do
list:insertRow{
rowHeight = 42,
isCategory = false,
params = { title = “row”}
}
end

list:insertRow{
rowHeight = 42,
isCategory = true,
params = { title = “Category2”}
}
for i = 1, 1111, 1 do
list:insertRow{
rowHeight = 42,
isCategory = false,
params = { title = “row”}
}
end

end

resetTable()[/lua]

Just a couple of things. First thank you for using code formatting in your post, however all indentions were lost along the way making it really hard to understand what you’re doing.  Around here we have a motto:  Help us, help you.  

In this case, you talk about a community developer or staff member creating a new project, editing main.lua and dropping your code into it. This may not seem like a big ask, but everyone here’s time is precious. On the other hand, you have a project already, complete with main.lua, config.lua and build.settings (hopefully with well-formatted code) and it’s much quicker for you to compress the project folder to a .zip file, upload that file to a place like Dropbox or Google drive or some other file sharing service and provide us a link to the .zip file.

Then we can just click on a link, have our browser extract the project to a folder and open it in the simulator and see what’s going on.  In addition, you reference an image/mask file that we don’t have so we would get an error just pasting your code into a project we create. Please help us by providing the entire project in a .zip file? 

Now all that said, without answering your question directly, why are you inserting almost 1200 rows into a tableView? Users are not going to scroll through thousands of lines in a tableView. It’s best to add a few rows (say under 100) and if you want to implement infinite scroll, add more rows when you reach the bottom. But even then you will be creating a very large in-memory data structure that will end up being fraught with performance issues. 

Category rows are special.  As you scroll, the current category row sticks to the top of the display, allowing other rows to float below the category row. This is an iOS behavior. As the next category row scrolls into position, it replaces the one that’s sticky.  These sticky rows have to be drawn on top. When scrolling with 0 transition time, you’re likely seeing this as a side-effect of this layering.

Rob

I’m not sure what happened to the indentations, the source I copied from had it but they went away when I pasted and saved it. I’ll keep that in mind next time, thank you. 

I see, thanks for clarifying. From my perspective I thought copying into main.lua would actually be easier to do, and assumed the blank project will be in the same state as what I have, so copy paste would work seamlessly. 

Here’s the zip for the project I tested with: https://www.dropbox.com/s/niwgup07a6h4uao/listtest.zip?dl=0

I wanted to add a bunch of rows to maybe make the blinking of the table more visible, as I create table and call scrollToY immediately afterwards, though I don’t think it made a significant difference to the result I was looking for. In my actual project, I don’t have nearly that many rows, and I was able to see this blinking with far less rows, around 40 rows added. 

I see… is there something I can do about the category row scrolling side effect?  Or I shouldn’t use instant scroll if category rows are used?