Is it possible to display the loading indicator until the task node response is completed?
Opened this issue · 3 comments
I'm trying to display image until the task node response is not completed. I used Four Task node in MainScene. Currently, All Four Task nodes Take a 6-7 Sec For Fetching the Response. So, It's display a Blank Screen up to 6 to 7 Sec. Currently, I applied below logic For Displaying a Loading Indicator In-Between Splash Screen and View landing Page.
MainScene.xml
<Group id="LoaderScreen" visible="false">
<LayoutGroup translation="[640,360]" horizAlignment="center" vertAlignment="center">
<BusySpinner id="LoadingIndicator" clockwise="true" spinInterval="2" uri="pkg:/images/loader.png"/>
</LayoutGroup>
</Group>
MainScene.brs
sub Show(args as Object)
m.LoaderScreen = m.top.findNode("LoaderScreen")
m.LoaderScreen.visible = true
m.LoadingIndicator = m.top.findNode("LoadingIndicator")
m.LoadingIndicator.control = "start"
?"m.LoadingIndicator : "m.LoadingIndicator
?"First : m.LoadingIndicator.visible : "m.LoadingIndicator.visible 'true
m.FirstNode= CreateObject("roSGNode", "FirstNode")
m.FirstNode.control = "RUN"
?"Second : m.LoadingIndicator.visible : "m.LoadingIndicator.visible 'true
m.SecondNode = CreateObject("roSGNode", "SecondNode")
m.SecondNode.control = "RUN"
?"Third : m.LoadingIndicator.visible : "m.LoadingIndicator.visible 'true
m.ThirdNode = CreateObject("roSGNode", "ThirdNode")
m.ThirdNode.control = "RUN"
?"Fourth : m.LoadingIndicator.visible : "m.LoadingIndicator.visible 'true
m.FourthNode = CreateObject("roSGNode", "FourthNode")
m.FourthNode.control = "RUN"
?"Five : m.LoadingIndicator.visible : "m.LoadingIndicator.visible 'true
m.LoadingIndicator.control = "stop"
m.LoaderScreen.visible = false
end sub
m.LoadingIndicator : <Component: roSGNode:BusySpinner> =
{
clockwise: true
control: invalid
poster: <Component: roSGNodeSmiley Tongueoster>
spinInterval: 2
uri: "pkg:/images/loader.png"
childRenderOrder: "last"
clippingRect: <Component: roAssociativeArray>
enableRenderTracking: true
inheritParentOpacity: true
inheritParentTransform: true
muteAudioGuide: false
opacity: 1
renderPass: 0
renderTracking: "none"
rotation: 0
scale: <Component: roArray>
scaleRotateCenter: <Component: roArray>
translation: <Component: roArray>
visible: true
change: <Component: roAssociativeArray>
focusable: false
focusedChild: <Component: roInvalid>
id: "LoadingIndicator"
}
Here, I found m.LoadingIndicator.visible value "true" After, Run a Every Single Task node. But, When I start the Application. It's Automatically blank screen above the m.LoadingIndicator. Any Solution for this?
I also tried with below Logic But, Here It's Display a Blank Screen Above the Spinner Automatically. I don't understand clearly why this has happened. Does anything need to change on this?
SpinningWheelCustomView.brs
sub init()
m.LoaderScreen = m.top.findNode("LoaderScreen")
m.LoadingIndicator = m.top.findNode("LoadingIndicator")
m.FirstNode= CreateObject("roSGNode", "FirstNode")
m.FirstNode.observeField("state", "onTaskStateChanged")
m.FirstNode.control = "RUN"
m.SecondNode = CreateObject("roSGNode", "SecondNode")
m.SecondNode.observeField("state", "onTaskStateChanged")
m.SecondNode.control = "RUN"
m.ThirdNode = CreateObject("roSGNode", "ThirdNode")
m.ThirdNode.observeField("state", "onTaskStateChanged")
m.ThirdNode.control = "RUN"
m.FourthNode = CreateObject("roSGNode", "FourthNode")
m.FourthNode.observeField("state", "onTaskStateChanged")
m.FourthNode.control = "RUN"
end sub
sub onTaskStateChanged()
?"MainScene :: onTaskStateChanged()"
if m.FirstNode <> invalid then
if m.FirstNode.state = "run"
m.LoaderScreen.visible = true
m.LoadingIndicator.control = "start"
end if
end if
if m.SecondNode <> invalid then
if m.SecondNode.state = "run"
m.LoaderScreen.visible = true
m.LoadingIndicator.control = "start"
end if
end if
if m.ThirdNode <> invalid then
if m.ThirdNode.state = "run"
m.LoaderScreen.visible = true
m.LoadingIndicator.control = "start"
end if
end if
if m.FourthNode <> invalid then
if m.FourthNode.state = "run"
m.LoaderScreen.visible = true
m.LoadingIndicator.control = "start"
else if m.FourthNode.state = "stop"
m.LoaderScreen.visible = false
m.LoadingIndicator.control = "stop"
end if
end if
end sub
SpinningWheelCustomView.xml
<?xml version = "1.0" encoding = "utf-8" ?>
<component name="SpinningWheelCustomView" extends="Group">
<script type="text/brightscript" uri="SpinningWheelCustomView.brs" />
<children>
<Rectangle width="1920" height="1080" color="0x0d1427"
translation="[0,0]">
<Group id="LoaderScreen" visible="false">
<LayoutGroup translation="[640,360]"
horizAlignment="center" vertAlignment="center">
<BusySpinner id="LoadingIndicator" clockwise="true"
spinInterval="2" uri="pkg:/images/loader.png" />
</LayoutGroup>
</Group>
</Rectangle>
</children>
</component>
MainScene.brs
sub Show(args as Object)
m.SpinningWheelCustomView = CreateObject("roSGNode", "SpinningWheelCustomView")
m.top.ComponentController.CallFunc("show", {
view: m.SpinningWheelCustomView
})
end sub
I am still facing this issue. Any suggestion. I tried this issue with both BrightScript Component(SGDex Component and normal BrightScript Component). I applied both ways in both components As I mentioned above. In normal BrightScript Component display an automatically Splash Screen until a TaskNode Response is not complete. But In SGDex Component display and automatically Blank Screen Until a TaskNode Response is not Complete. Here, Above, I mentioned Two Ways.
In SGDEX views, the loading spinner is managed by the framework, there's nothing extra you need to do in that case. If you're using a custom view, you will need to manage any loading UX yourself.
If you're having trouble using SceneGraph components that are not part of SGDEX, the better place to look for help is the Roku Developer Forum.