Commit 6297d9c4 authored by ∞'s avatar 💻

Show loader on form submit

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