How to change the Loading Screen that comes When we Use ON in routes

Get Help
1

Hi Everyone,
How to modify the loading screen that comes while loading the api in routes when we use ON.
i have modified inside the sdk itself but when we share our build we don’t share the node_modules.
Is there any way to modify it from the front ?

image
image1694×940 11.6 KB

Any help would be much appreciated
Thanks & Regards
Anand Patel

1 Like
2

Hi @anandpatel4, could you please share more context or a code snipper of your router config to get more information as to what you’re attempting to do?

3

Hi @ eduardo.guzman

on

The on data provider shows the Loader, performs the data request, hides the Loader and displays the new page. For example:

{
    path: 'player/:playlistId/:assetId',
    // page instance and dynamic url data
    // will be available in the callback
    on: (page, {playlistId, assetId}) => {
        return new Promise((resolve, reject)=>{
            // do a request
            doRequest.then((lists)=>{
                // set property on the page
                page.lists = list
                resolve()
            }).catch((e)=>{
                reject(e)
            })
        })
    },
    // time in seconds
    cache: 60 * 10 // 10 minutes
}

If you navigate to: localhost:8080/#player/267/173688 via Router.navigate('player/267/173688'); , the Router performs the following subsequent actions:

  1. Hide the current page (and destroy it to free up memory, if so configured)
  2. Show a Loading Component (optional)
  3. Wait for the data provider’s request to resolve
  4. Show the new page attached to the route

While using ON, a Loading Component comes I want to modify that component

4

As you can see in the router example app, it’s extending by the router provided App base class:

And spreading the template properties into the template object:

A quick lookup in the baseclass definition shows the Loading component that will be displayed when you’re using an on data-provider.

You can customize or provide your own in one of the following ways:

  • patch it in one of the lifecycle events, i.e:
_setup() {
        Router.startRouter(routes, this);
        this.tag("Loading").patch({
            color:0xffc0ff33
        })
}
  • override the base-class provided Loading property:
static _template(){
        return {
            ...super._template(),
            Widgets: {
                Menu: {
                    type: Menu
                }      
            },
            Loading: {
                type: CustomLoader
            }
        }
    }
4 Likes
5

Thanks a lot @erikhaandrikman for your fast response :grinning: