phx-react
Version:
PHX REACT
41 lines • 1.57 kB
JavaScript
// components/LoadingProvider.tsx
'use client';
import React from 'react';
import { createContext, useContext, useState, useEffect } from 'react';
import { usePathname } from 'next/navigation';
var LoadingContext = createContext({
loading: false,
// eslint-disable-next-line @typescript-eslint/no-empty-function
setLoading: function (_v) { },
progress: 0
});
export var useLoading = function () { return useContext(LoadingContext); };
export function PHXLoadingProvider(_a) {
var children = _a.children;
var _b = useState(false), loading = _b[0], setLoading = _b[1];
var pathname = usePathname();
var _c = useState(0), progress = _c[0], setProgress = _c[1];
useEffect(function () {
setLoading(false);
setProgress(100);
}, [pathname]);
useEffect(function () {
if (loading) {
var timerId_1 = setInterval(function () {
if (progress <= 90) {
var nextProgress = progress + 5;
setProgress(nextProgress);
}
}, 100);
return function () { return clearInterval(timerId_1); };
}
else {
var timerId_2 = setTimeout(function () {
setProgress(0);
}, 400);
return function () { return clearTimeout(timerId_2); };
}
}, [loading, progress]);
return React.createElement(LoadingContext.Provider, { value: { loading: loading, setLoading: setLoading, progress: progress } }, children);
}
//# sourceMappingURL=loading-provider.js.map