Loaders

README.md

Loaders

Useful code to handle loaders on application

Usage:

// api
Loaders.start(`Loader/Name`)

api.request('...').finally(() => {
  Loaders.finish(`Loader/Name`)
})

// component (React)
const { isLoading, isLoadingNamespace } = useLoaders(`Loader/Name`)

const Component = () => {
  return (
    <Button 
      isLoading={isLoading} 
      onClick={() => {
        // api call
      }}
    ></Button>
  )
}

Loaders.ts

import { TypedEmitter } from 'tiny-typed-emitter'

type TypeLoader = {
  [key: string]: number
}

class Loaders extends TypedEmitter<{
  start: (name: string) => void
  finish: (name: string) => void
  forceUpdate: () => void
}> {
  private loaders: TypeLoader = {}

  public start(name: string) {
    if (this.isLoading(name)) {
      this.increment(name)
    } else {
      this.loaders[name] = 1
    }
    this.emit('start', name)
    this.emit('forceUpdate')
  }

  public finish(name: string) {
    this.decrement(name)
    this.emit('finish', name)
    this.emit('forceUpdate')
  }

  public isLoading(name: string) {
    for (const loaderName in this.loaders) {
      const loader = this.loaders[loaderName]
      if (loaderName === name) {
        return loader > 0
      }
    }

    return false
  }

  public isLoadingNamespace(name: '*' | string) {
    for (const loaderName in this.loaders) {
      const loader = this.loaders[loaderName]
      if ((loaderName.startsWith(name) || name === '*') && loader > 0) {
        return true
      }
    }

    return false
  }

  private increment(name: string) {
    this.loaders[name]++
  }

  private decrement(name: string) {
    this.loaders[name]--
  }
}

export default new Loaders()

useLoaders.ts

import { useMemo, useState, useEffect } from 'react'
import Loaders from '../services/helpers/Loaders'

export function useLoaders(name: '*' | string) {
  const [lastUpdate, setLastUpdate] = useState(0)

  const onForceUpdate = () => {
    setLastUpdate(() => Date.now())
  }

  const isLoading = useMemo(() => {
    return Loaders.isLoading(name)
  }, [name, lastUpdate])

  const isLoadingNamespace = useMemo(() => {
    return Loaders.isLoadingNamespace(name)
  }, [name, lastUpdate])

  useEffect(() => {
    Loaders.on('forceUpdate', onForceUpdate)

    return () => {
      Loaders.off('forceUpdate', onForceUpdate)
    }
  }, [])

  return {
    isLoading,
    isLoadingNamespace
  }
}