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

Question

I'm trying to display image until the task node response is not complete. I'm using below code. But, Still It's showing blank Screen.

m.LoaderScreen = m.top.findNode("LoaderScreen") 
m.LoaderScreen.visible = true 
m.APIResponse = CreateObject("roSGNode", "APIResponse") 
m.APIResponse.control = "RUN" 
m.LoaderScreen.visible = false

Anyone suggest any other way to do this?

Edited Post

Task node :

<field id = "response" type = "string" />

m.top.response = "My Response"

MainScene :

m.APIResponse.observeField("response", "onScreenResponse")

sub onScreenResponse()
m.LoaderScreen.visible = false
end sub

Updated Post

First Way

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: roSGNode:Poster>
    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"
}

Currently, I doing like this. 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.

Second Way

I'm trying to Display Loading Indicator in-between the splash Screen and landing page. I already tried What you suggested. like below. Does anything change need on this?

Using below way I tried with Task node state. Loading Indicator displays Using both the ways. But, Above the Loading indicator, It displays a one blank screen Automatically When the Task node is running. I also tried creating a new Channel. But, Here also Result is the same.

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>

MainScene.brs

sub Show(args as Object)
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

Answer 1

Add an observer for the task node response object. In this observer call m.loaderscreen.visible = false. It will solve your problem.