in a grails 3 app, what is spinner and do I need application.js?

155 Views Asked by At

grails 3 comes with bootstrap 3. I want to create my own main.gsp layout based on grails 4, i.e. replace the default main.gsp with something like this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <asset:link rel="icon" href="favicon.ico" type="image/x-ico" />
    <title><g:layoutTitle default="DAM"/></title>
    <g:layoutHead/>
</head>
<body>
<g:layoutBody/>
<div class="footer" role="contentinfo"></div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

At the bottom of the default main.gsp is this:

<div id="spinner" class="spinner" style="display:none;">
    <g:message code="spinner.alt" default="Loading&hellip;"/>
</div>

<asset:javascript src="application.js"/>

The question is, should I include these? In all my years using grails, I have never seen a spinner appear in the UI, so am not sure if this actually works?

I am guessing I don't want application.js?

Also not sure what this is for, as it has no content:

<div class="footer" role="contentinfo"></div>
1

There are 1 best solutions below

0
Jeff Scott Brown On

The question is, should I include these?

Only if you ever want to display the spinner. The default main.css defines a style for the spinner:

.spinner {
    background: url(../images/spinner.gif) 50% 50% no-repeat transparent;
    height: 16px;
    width: 16px;
    padding: 0.5em;
    position: absolute;
    right: 0;
    top: 0;
    text-indent: -9999px;
}

Adjust that however you find appropriate.

The default sitemesh layout contains a div with that style and has the display set to none so it won't be displayed.

<div id="spinner" class="spinner" style="display:none;">
    <g:message code="spinner.alt" default="Loading&hellip;"/>
</div>

A typical use of this is if you have some Javascript which does an action such that you want to display the spinner while that action is happening, that Javascript can set that display attribute and that will cause the spinner to be displayed until something sets that attribute back to none.

In all my years using grails, I have never seen a spinner appear in the UI, so am not sure if this actually works?

It does unless you have made some changes that might interfere with that.

I am guessing I don't want application.js?

It is hard to say if you want that or not. It really depends on what your app is doing. The default application.js for a 3.3.9 app pulls in several other .js files...

// This is a manifest file that'll be compiled into application.js.
//
// Any JavaScript file within this directory can be referenced here using a relative path.
//
// You're free to add application-wide JavaScript to this file, but it's generally better
// to create separate JavaScript files as needed.
//
//= require jquery-3.3.1.min
//= require bootstrap
//= require popper.min
//= require_self

If you don't want those pulled in then you may not want application.js. Of course you can edit application.js to include whatever it is that you do want to pull in.

Also not sure what this is for, as it has no content:

<div class="footer" role="contentinfo"></div>

That element is there as a placeholder for you to render common footer elements.