<app>
  <user name={state.name}/>
  <sidebar/>
  <script>
    import lazy from '@riotjs/lazy'
    import Loader from './my-loader.riot'

    export default {
      components: {
        // use a fallback loader
        user: lazy(Loader, () => import('./user.riot'))
        // just lazy load the sidebar
        sidebar: lazy(() => import('./sidebar.riot'))
      }
    }
  </script>
</app>

<app>
  <user name={state.name} onload={ removeSplashscreen }/>
  <script>
    import lazy from '@riotjs/lazy'
    import Loader from './my-loader.riot'

    export default {
      components: {
        // use a fallback loader
        user: lazy(Loader, () => import('./user.riot'))
      },
      removeSplashscreen() {
        // the splashscreen, in this example, is create in pure html
        // in the main page, to avoid blank page loading
        const splashscreen = document.querySelector("#splashscreen");
        if (!splashscreen) {
          return;
        }
        splashcreen.parentElement.removeChild(splashscreen);
      }
    }
  </script>
</app>

<app>
  <router>
    <route path="/user/:name">
      <!-- this component will be loaded only when the route will be matched -->
      <user name={route[0]}/>
    </route>
  </router>
  <script>
    import lazy from '@riotjs/lazy'
    import Loader from './my-loader.riot'

    export default {
      components: {
        user: lazy(Loader, () => import('./user.riot'))
      }
    }
  </script>
</app>