States not gets enabled if there are nested lazy loaded states

[bitakeyogesh]

I am trying to load everything lazily, it works for one level routing, but it is not working for nested levels. It not works mean states are not getting enabled.
Here is the code.

import loadable from '@loadable/component';

export const loadLazyComponent = ( name, url, componentName, parent ) => {
    const component = loadable( () => import( `../example/${componentName}` ), {
        fallback: <div>Loading...</div>
    } );

    return {
        states: [ {
            name: name,
            ...url && { url: url },
            ...parent && { parent: parent },
            component: component
        } ]
    };
};
let states = [ {
        name: 'parent.**',
        url: '/parent',
        lazyLoad: () => loadLazyComponent( 'parent', '/parent', 'ParentPage' )
    },
    {
        name: 'child.**',
        url: '/child',
        parent: 'parent',
        lazyLoad: () => loadLazyComponent( 'child', '/child', 'ChildPage','parent' )
    }
];
export default states;

After trial and error i make it work by changing the parent of child future state, but with this If i direct load or refresh the /parent/child its not working.

Am i missing something or is it a bug?

[stale]

This issue has been automatically marked as stale because it has not had
recent activity. It will be closed if no further activity occurs.

This does not mean that the issue is invalid. Valid issues may be reopened.

Thank you for your contributions!

[stale]

This issue has been automatically closed.