useLoading.js 807 B

1234567891011121314151617181920212223242526272829303132333435363738
  1. import { ref } from 'vue'
  2. const isGlobalLoading = ref(false)
  3. let loadingStartTime = null
  4. export const useLoading = () => {
  5. const showLoading = () => {
  6. isGlobalLoading.value = true
  7. loadingStartTime = Date.now()
  8. }
  9. const hideLoading = () => {
  10. if (!loadingStartTime) {
  11. isGlobalLoading.value = false
  12. return
  13. }
  14. // 최소 300ms 동안 로딩을 표시
  15. const elapsedTime = Date.now() - loadingStartTime
  16. const minLoadingTime = 300
  17. if (elapsedTime < minLoadingTime) {
  18. setTimeout(() => {
  19. isGlobalLoading.value = false
  20. loadingStartTime = null
  21. }, minLoadingTime - elapsedTime)
  22. } else {
  23. isGlobalLoading.value = false
  24. loadingStartTime = null
  25. }
  26. }
  27. return {
  28. isGlobalLoading,
  29. showLoading,
  30. hideLoading
  31. }
  32. }