@kadconsulting/dry
Version:
KAD Reusable Component Library
20 lines • 1.01 kB
JavaScript
import { useState, useEffect } from 'react';
const useLoadingMessage = (isLoading, componentName) => {
const [message, setMessage] = useState('Loading...');
useEffect(() => {
let timeouts = [];
if (isLoading) {
timeouts.push(setTimeout(() => setMessage('This is taking longer than normal...'), 10000)); // 10 seconds
timeouts.push(setTimeout(() => setMessage('Hmm... Still working on it.'), 20000)); // 20 seconds
timeouts.push(setTimeout(() => setMessage(`Having trouble loading ${componentName}. Please wait or try refreshing.`), 30000)); // 30 seconds
}
else {
setMessage('Loading...');
timeouts.forEach(clearTimeout); // Clear all timeouts if isLoading becomes false
}
return () => timeouts.forEach(clearTimeout); // Cleanup on unmount or isLoading change
}, [isLoading, componentName]);
return message;
};
export default useLoadingMessage;
//# sourceMappingURL=useLoadingMessage.js.map