App loading spinner

LaurentPayot

Initial loading of vendor.js and app.js can take a long time at startup, and the current white screen is not the best in terms of user experience.
I added a simple spinner displayed while the app is loading and it’s much better.

To do so just add the following spinner style in the head section of index.html and add the spinner class to your q-app div. That’s all! (the spinner class will be removed at app startup)

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

    <title>My app</title>
    <link rel="shortcut icon" type="image/x-icon" href="/statics/favicon.ico">

    <!-- CORDOVA: comment fonts CDN -->
    <link href="https://fonts.googleapis.com/css?family=Material+Icons|Roboto:100,300,400,500,700" rel="stylesheet" type="text/css">

    <style>
      .spinner {
        width: 100%;
        height: 100%;
        background-color: #999999;
      }
      .spinner:before {
        content: '';
        box-sizing: border-box;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        margin-top: -50px;
        margin-left: -50px;
        border-radius: 50%;
        border-top: 5px solid #ffffff;
        border-right: 5px solid transparent;
        animation: spinner .6s linear infinite;
      }
      @keyframes spinner {
        to {transform: rotate(360deg);}
      }
    </style>
  </head>
  <body>
    <div id="q-app" class="spinner">
      <!-- built files will be auto injected -->
    </div>
  </body>
</html>

@rstoenescu let me know if you think a PR would be a good idea for this feature, or if you want to do it yourself with another spinner.

kayex

What are you using for the actual spinner icon? I don’t see it in your code there.

LaurentPayot

@kayex there is no icon, just CSS. You can see the spinner here: https://jsfiddle.net/laurentpayot/j0xzsmhr/5/

LaurentPayot

I stole the CSS-only spinner from https://stephanwagner.me/only-css-loading-spinner. Great CSS-spinners also at https://loading.io/css/ .

kayex

@LaurentPayot Ahh! Got it. Thank you.

polger

This is nice! However, I inverted the colors (gray spinner and white background) because otherwise it was not visible (white spinner over white background) since div#q-app (the background) has height of 0px.

Thanks!