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

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 ?

Any help would be much appreciated
Thanks & Regards
Anand Patel

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?

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

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
            }
        }
    }
3 Likes

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