Commit 6297d9c4 authored by ∞'s avatar 💻

Show loader on form submit

parent c77bb785
......@@ -2,6 +2,7 @@ import Cookie from 'js-cookie'
import { Controller } from 'stimulus'
import M from 'mrsmaterialize'
import init from '../init.js'
import loader from '../loader.js'
export default class extends Controller {
submit(e) {
......@@ -9,6 +10,7 @@ export default class extends Controller {
// console.warn('Skipping ajax because form tag has no id attr')
return
}
loader.show()
e.preventDefault()
var url = this.element.getAttribute('action')
var formData = new FormData(this.element)
......@@ -64,11 +66,13 @@ export default class extends Controller {
target.innerHTML = source.innerHTML
init(target)
loader.hide()
if (url && url != window.location.href) {
window.history.pushState({}, title, url)
}
}).catch(error => {
loader.hide()
M.toast({
html: error,
classes: 'orange darken-4',
......
......@@ -2,6 +2,7 @@ import Cookie from 'js-cookie'
import { Controller } from 'stimulus'
import M from 'mrsmaterialize'
import init from '../init.js'
import loader from '../loader.js'
export default class extends Controller {
connect() {
......@@ -15,6 +16,7 @@ export default class extends Controller {
open(e) {
e.preventDefault()
var url = this.element.getAttribute('href')
loader.show()
fetch(url, {
credentials: 'same-origin',
headers: {
......
......@@ -3,6 +3,7 @@ import { definitionsFromContext } from 'stimulus/webpack-helpers'
import init from './init.js'
import M from 'mrsmaterialize'
import './style.sass'
import loader from './loader.js'
(() => {
if (window.Turbolinks === undefined) {
......@@ -112,17 +113,7 @@ document.addEventListener('mouseover', event => {
}, 250)
})
document.addEventListener('turbolinks:click', () => {
var e = document.getElementById('main-loader')
if (e !== undefined) {
e.style.display = 'flex'
}
})
document.addEventListener('turbolinks:render', () => {
var e = document.getElementById('main-loader')
if (e !== undefined) {
e.style.display = 'none'
}
})
document.addEventListener('turbolinks:click', loader.show)
document.addEventListener('turbolinks:render', loader.hide)
export default application
import M from 'mrsmaterialize'
var loader = {}
loader.show = () => {
var e = document.getElementById('main-loader')
if (e !== undefined) {
e.style.display = 'flex'
}
}
loader.hide = () => {
for (var e of document.getElementsByClassName('loader-container')) {
e.style.display = 'none'
}
}
export default loader
......@@ -42,7 +42,7 @@ header .navbar-fixed .breadcrumb
.breadcrumb::before
color: teal !important
#main-loader
.loader-container
top: 0px
left: 0px
width: 100%
......@@ -53,6 +53,7 @@ header .navbar-fixed .breadcrumb
justify-content: center
background-color: white
background-color: rgba(255, 255, 255, 0.5)
z-index: 1000000
div small.error
font-size: 110%
......
<div id="main-loader" class="turbolinks-progress-bar">
<div class="preloader-wrapper big active">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
<div class="preloader-wrapper big active">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
......@@ -32,7 +32,9 @@
</head>
<body class="{% block body_class %}{{ view.body_class|default('') }}{% endblock %}">
{% include 'crudlfap/_loader.html' %}
<div id="main-loader" class="loader-container turbolinks-progress-bar">
{% include 'crudlfap/_loader.html' %}
</div>
{% include 'crudlfap/_menu_main.html' %}
<header>
<div class="navbar-fixed">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment