https://github.com/f/dom-wait

Complex Loader and Progress Management for Vanilla JS
https://github.com/f/dom-wait

Last synced: about 2 months ago
JSON representation

Complex Loader and Progress Management for Vanilla JS

• Host: GitHub
• URL: https://github.com/f/dom-wait
• Owner: f
• Created: 2018-07-10T08:32:25.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-07-24T08:00:52.000Z (about 6 years ago)
• Last Synced: 2024-07-18T04:38:48.454Z (2 months ago)
• Language: HTML
• Homepage:
• Size: 4.43 MB
• Stars: 142
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## ↺ DOM-wait

Multiple Process Loader Management for vanilla JavaScript.

**Read the [Medium post "Managing Complex Waiting Experiences on Web UIs"](https://medium.com/@fkadev/managing-complex-waiting-experiences-on-web-uis-29534d2d92a8).**

> DOM wait is a vanilla implementation of [vue-wait](https://github.com/f/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

  

    

  

  

  

```

# ✂️ 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.

```html



  
Your IP is:

  
#.#.#.#


  

    var $ip = document.getElementById('ip');

    fetch('https://ipapi.co/json')

      .then(response => response.json())

      .then(response => {

        $ip.innerHTML = response.ip;

      });

  



```


## 2. Add `data-wait-for` attribute

`dom-wait` watches elements with `data-wait-for` attribute with loading message.

```html



  
Your IP is:

  
#.#.#.#



```


## 2. Add `.waiting` element

This element will be **attached** when loading starts and **detached** when loading ends.

```html



  
Getting IP...


  
Your IP is:

  
#.#.#.#



```


## 3. Start and stop waiters with `wait.start` and `wait.end`

```js

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.

```html



  

  
#.#.#.#



```


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:

```html



  
Loading...

  



```


# License

MIT © [Fatih Kadir Akın](https://github.com/f)