Wait n seconds before bootstrap, Angular 2

Question

I'm making a space/gravity game in Angular 2 - and currently want to have a splash screen before the mainmenu component loads.

I figure the easiest way would be to simply use the pre-bootstrapped index.html contents, as such:

<body>

    <!-- 

        //This is where our bootstrapped content will go. 

        //Because everything will be removed from the DOM after bootstrap,

        //we can consider this pre-bootstrapped index.html as a psuedo "splash screen"

        //(anim credit @ http://codepen.io/katehummer/pen/zrygBM)

    -->

    <!--<app-mainmenu>-->

    <svg class="solar-system">

        <circle id="sun" cx="100" cy="100" r="10" stroke="none" fill="#FFE581" />

        <circle id="mercury" cx="100" cy="100" r="3" fill="#fff" stroke="none" />

        <circle id="venus" cx="100" cy="100" r="4" fill="#fff" stroke="none" />

        <circle id="earth" cx="100" cy="100" r="5" fill="#fff" stroke="none" />

        <circle id="mars" cx="100" cy="100" r="5" fill="#fff" stroke="none" />

        <circle id="mercury-orbit" cx="100" cy="100" r="35" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.5" />

        <circle id="venus-orbit" cx="100" cy="100" r="55" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.5" />

        <circle id="earth-orbit" cx="100" cy="100" r="75" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.5" />

        <circle id="mars-orbit" cx="100" cy="100" r="95" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.5" />

    </svg>





    <!-- 

        //WAIT 10 SECONDS MINIMUM - OR WAIT UNTIL USER LOADS IF AFTER 10 SEC

    -->

    <!--</app-mainmenu>-->

</body>

While

<app-mainmenu>

is commented out, I can sucessfully test my animation. It looks just like the one referenced in the comments.

The next step is to tell Angular to wait 10 seconds before bootstrapping. I've tried a delay in JS at the bottom, but since it doesn't block, it didn't work.

<script>

    setInterval(tryFinishLoading, 10000);



    function tryFinishLoading() {

        alert("loaded");

    }

</script>

Can anyone tell me how I can wait for the following:

1) The user to load, if < 10, go to (2)

2) Wait until 10, if not loaded, loop until loaded.

Cheers!

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

This should do the trick.

<body>
  <app-mainmenu id="main" style="display:none"></app-mainmenu>
  <svg id="anim">Your Animation</svg>

  <script>
    var anim = document.getElementById('anim');
    var main = document.getElementById('main');
    setTimeout(function() {
      anim.style.display = 'none';
      main.style.display = 'block';
    }, 10000);
  </script>
</body>

Wait n seconds before bootstrap, Angular 2

Sign up