f / Dom Wait
Labels
↺ DOM-wait
Multiple Process Loader Management for vanilla JavaScript.
Read the Medium post "Managing Complex Waiting Experiences on Web UIs".
DOM wait is a vanilla implementation of vue-wait.
DOM-wait helps to manage multiple loading states on the page without any conflict. It's based on a very simple idea that manages an array with multiple loading states.
🗝 Key Features
- Zero-dependency. Requires nothing to work.
- No CSS. Attaches and detaches elements instead of showing and hiding them.
- Very simple API.
🚀 Quick Start
Add dom-wait.js to head.
<html>
<head>
<script src="dom-wait.js"></script>
</head>
<body>
</body>
</html>
✂️ Usage
1. Write your HTML
dom-wait is very easy to use and migrate your current projects. Assume you have some API calls ipapi.co to get client IP.
<div>
<h2>Your IP is:</h2>
<div id='ip'>#.#.#.#</div>
<script>
var $ip = document.getElementById('ip');
fetch('https://ipapi.co/json')
.then(response => response.json())
.then(response => {
$ip.innerHTML = response.ip;
});
</script>
</div>
2. Add data-wait-for attribute
dom-wait watches elements with data-wait-for attribute with loading message.
<div data-wait-for='getting ip'>
<h2>Your IP is:</h2>
<div id='ip'>#.#.#.#</div>
</div>
2. Add .waiting element
This element will be attached when loading starts and detached when loading ends.
<div data-wait-for='getting ip'>
<div class='waiting'>Getting IP...</div>
<h2>Your IP is:</h2>
<div id='ip'>#.#.#.#</div>
</div>
3. Start and stop waiters with wait.start and wait.end
var $ip = document.getElementById('ip');
// start waiting
wait.start('getting ip');
fetch('https://ipapi.co/json')
.then(function (response) {
return response.json();
})
.then(function (response) {
$ip.innerHTML = response.ip;
// end waiting
wait.end('getting ip');
});
🚦 Attach/Detach Based DOM Management
DOM-Wait doesn't make hide/show on elements. Instead, attaches and detaches elements to DOM. This makes DOM cleaner and lighter on waiting process.
<div data-wait-for="getting ip">
<!--wait:8ef4c4e7-->
<div id="ip">#.#.#.#</div>
</div>
DOM-Wait detaches .waiting elements from DOM and inserts a comment node instead. When loading starts it attaches back and detaches rest of the siblings:
<div data-wait-for="getting ip">
<div class="waiting">Loading...</div>
<!--wait:c9169aa9-->
</div>
License
MIT © Fatih Kadir Akın