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