-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1705 from threefoldtech/development_navigation_lo…
…ader feat: add global navigation loader
- Loading branch information
Showing
4 changed files
with
121 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
<template> | ||
<div | ||
class="position-fixed top w-100 left bg-primary" | ||
:style="[ | ||
{ | ||
height: '2px', | ||
zIndex: 99999999, | ||
transformOrigin: 'left center', | ||
}, | ||
style, | ||
]" | ||
/> | ||
</template> | ||
|
||
<script lang="ts"> | ||
import { computed, ref, type StyleValue, watch } from "vue"; | ||
import { useNavigationStatus } from "../hooks"; | ||
export default { | ||
name: "TfNavigationLoader", | ||
setup() { | ||
const navigationStatus = useNavigationStatus(); | ||
/** | ||
* loading value indicates scale at a wider domain to avoid floating issues | ||
* scale: 0 -> 1 | ||
* value: 0 -> 100 | ||
*/ | ||
const loadingValue = ref(0); | ||
let interval: ReturnType<typeof setInterval> | null = null; | ||
function clear() { | ||
interval !== null && clearInterval(interval); | ||
interval = null; | ||
} | ||
watch( | ||
() => navigationStatus.value === "Loading", | ||
async loading => { | ||
clear(); | ||
if (!loading) { | ||
return; | ||
} | ||
loadingValue.value = 0; | ||
interval = setInterval(() => { | ||
const value = Math.min(75, loadingValue.value + (3 + Math.round(Math.random() * 10))); | ||
loadingValue.value = value; | ||
if (value === 75) { | ||
clear(); | ||
} | ||
}, 5_00); | ||
}, | ||
); | ||
const style = computed<StyleValue>(() => { | ||
if (navigationStatus.value === "Loading") { | ||
return { | ||
opacity: 1, | ||
transition: loadingValue.value === 0 ? undefined : "transform 0.3s linear", | ||
transform: `scaleX(${loadingValue.value / 100})`, | ||
}; | ||
} | ||
return { | ||
opacity: 0, | ||
transition: "transform 0.3s linear, opacity 0.3s linear 0.6s", | ||
transform: `scaleX(${navigationStatus.value === "Failed" ? 0 : 1})`, | ||
}; | ||
}); | ||
return { loadingValue, style }; | ||
}, | ||
}; | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,3 @@ | ||
export * from "./use_password_input"; | ||
|
||
export * from "./useNavigationStatus"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import noop from "lodash/fp/noop.js"; | ||
import { onMounted, onUnmounted, ref } from "vue"; | ||
import { useRouter } from "vue-router"; | ||
|
||
export function useNavigationStatus() { | ||
const router = useRouter(); | ||
const status = ref<"Loading" | "Success" | "Failed">("Success"); | ||
|
||
let unSubscribeBeforeEach = noop; | ||
let unSubscribeAfterEach = noop; | ||
|
||
let currentToPath: string; | ||
|
||
onMounted(async () => { | ||
await router.isReady(); | ||
|
||
unSubscribeBeforeEach = router.beforeEach((to, _, next) => { | ||
currentToPath = to.fullPath; | ||
status.value = "Loading"; | ||
|
||
return next(); | ||
}); | ||
|
||
unSubscribeAfterEach = router.afterEach((to, _, failure) => { | ||
if (status.value !== "Loading" || currentToPath !== to.fullPath) { | ||
return; | ||
} | ||
|
||
status.value = failure ? "Failed" : "Success"; | ||
}); | ||
}); | ||
|
||
onUnmounted(() => { | ||
unSubscribeBeforeEach(); | ||
unSubscribeAfterEach(); | ||
}); | ||
|
||
return status; | ||
} |