MVC best way to show a splash screen on initial load

Question

I have a method where if it is initial load then a cookie will be set and it will direct to a splash screen.

After about 4 seconds I need the html to redirect back to the view where the cookie has been set and show go to the main page. The problem is after 4 seconds it just reloads the page and the splash animation keeps happening. I need it to go back to the homecontroller so that the cookie method is processed

Is there a best practice way to do this? Splash screen is required per requirements.

In my homecontroller

public virtual IActionResult Index()
{
    string splash = "splash"
    var splashKey = _httpContextAccessor.HttpCOntext.Request.Cookies["key"]

    if (Request.Cookies[splash] != null)
    {
        return View();
    }
    else
    {
        SetCookie(splash);

        return Redirect(Url.Content(Url.Content("`/Content/mysplash.html"));
    }
}

my splash html

<html>
<meta charset="UTF-8">
<head>

   splashstufff
</head>
<body>
<script>

    setTimeout(function() { window.location = "http://localhost:4200/" }, 4000);   <----Just loops here no redirect happens

</script>
</body>
</html>

Answer 1

You can add an absolute element that will cover the whole screen and fade it out when needed, showing the page underneath

For example

 setTimeout(function() { $('.splashscreen').fadeOut(); }, 4000);

 .splashscreen { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background-color: white; }.splashscreen h1 { text-align: center; margin-top: 150px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <meta charset="UTF-8"> <head> </head> <body> <div class="splashscreen"> <h1>Loading...</h1> </div> <div> <p> Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Phasellus accumsan cursus velit. Nam pretium turpis et arcu. Sed a libero. </p> <p> Phasellus consectetuer vestibulum elit. Cras dapibus. Morbi mollis tellus ac sapien. Duis vel nibh at velit scelerisque suscipit. Morbi nec metus. </p> </div> </body> </html>

You can put something fancier in the splashscreen div, like a spinner or similar.

MVC best way to show a splash screen on initial load

Question

1 answers

solution1
1 2020-06-16 00:51:29

MVC best way to show a splash screen on initial load

Question

1 answers

solution1 1 2020-06-16 00:51:29

solution1
1 2020-06-16 00:51:29