Is it possible to display the loading indicator until the task node response is completed?

[chaklasiyanikunj]

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?

[chaklasiyanikunj]

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

[chaklasiyanikunj]

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.

[RokuChris]

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.