Add Loading spinner to grid and increase limit for smooth scrolling (#571)

components/ItemGrid/ItemGrid.brs

@@ -34,6 +34,8 @@ sub init()
     m.filter = "All"
 
     m.loadItemsTask = createObject("roSGNode", "LoadItemsTask2")
+    m.spinner = m.top.findNode("spinner")
+    m.spinner.visible = true
 
     m.Alpha = m.top.findNode("AlphaMenu")
     m.AlphaSelected = m.top.findNode("AlphaSelected")
@@ -261,7 +263,7 @@ sub ItemDataLoaded(msg)
     end if
 
     m.itemGrid.setFocus(true)
-
+    m.spinner.visible = false
 end sub
 
 '
@@ -281,10 +283,9 @@ end sub
 'Handle new item being focused
 sub onItemFocused()
 
-    focusedRow = CInt(m.itemGrid.itemFocused / m.itemGrid.numColumns) + 1
+    focusedRow = m.itemGrid.currFocusRow
 
     itemInt = m.itemGrid.itemFocused
-
     ' If no selected item, set background to parent backdrop
     if itemInt = -1
         return
@@ -294,7 +295,7 @@ sub onItemFocused()
     SetBackground(m.itemGrid.content.getChild(m.itemGrid.itemFocused).backdropUrl)
 
     ' Load more data if focus is within last 3 rows, and there are more items to load
-    if focusedRow >= m.loadedRows - 3 and m.loadeditems < m.loadItemsTask.totalRecordCount
+    if focusedRow >= m.loadedRows - 5 and m.loadeditems < m.loadItemsTask.totalRecordCount
         loadMoreData()
     end if
 end sub

components/ItemGrid/ItemGrid.xml

@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <component name="ItemGrid" extends="JFGroup">
   <children>
+  
     <poster id="backdrop" 
       loadDisplayMode="scaleToFill"
       width="1920"
@@ -25,6 +26,7 @@
       drawFocusFeedback = "false" />  
       <Label translation="[0,540]" id="emptyText" font="font:LargeSystemFont" width="1920" horizAlign="center" vertAlign="center" height="64" visible="false" />
     <ItemGridOptions id="options" visible="false" />
+    <Spinner id="spinner" translation="[920, 540]" />
     <Animation  id="backroundSwapAnimation"  duration="1"  repeat="false"  easeFunction="linear" >
         <FloatFieldInterpolator id = "fadeinLoading" key="[0.0, 1.0]" keyValue="[ 0.00, 0.25 ]" fieldToInterp="backdropTransition.opacity" />
         <FloatFieldInterpolator id = "fadeoutLoaded" key="[0.0, 1.0]" keyValue="[ 0.25, 0.00 ]" fieldToInterp="backdrop.opacity" />

components/ItemGrid/LoadItemsTask2.xml

@@ -5,7 +5,7 @@
     <field id="itemId" type="string" />
     <field id="startIndex" type="integer" value="0" />
     <field id="itemType" type="string" value="" />
-    <field id="limit" type="integer" value="36" />
+    <field id="limit" type="integer" value="60" />
     <field id="metadata" type="assocarray" />
     <field id="sortField" type="string" value="SortName" />
     <field id="sortAscending" type="boolean" value="true" />