react-js-plugins
Version:
A powerful and efficient React utility library designed to enhance application performance by streamlining and simplifying the management of complex asynchronous operations.
69 lines (68 loc) • 2.89 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useCallback, useRef, lazy, Suspense } from 'react';
import NProgress from 'nprogress';
import { ErrorBoundary } from 'react-error-boundary';
export var promise = function (ms) { return new Promise(function (res) { return setTimeout(res, ms); }); };
function Fallback(_a) {
var error = _a.error;
var isProd = process.env.NODE_ENV === 'production';
return (_jsx("div", { style: { padding: '16px' }, children: isProd ? (_jsxs("div", { style: {
padding: '8px',
border: '1px solid #d0cfcf',
borderLeft: '2px solid #00abff',
backgroundColor: '#e3f2fd',
color: '#0d47a1',
borderRadius: '6px'
}, children: [_jsx("strong", { style: { display: 'block', marginBottom: '4px' }, children: "Page Loading Error" }), "Please check your network connection..."] })) : (_jsxs("div", { style: {
padding: '8px',
border: '1px solid #d0cfcf',
borderTop: '2px solid rgba(179, 11, 11, 0.68)',
backgroundColor: '#ffebee',
color: '#b71c1c',
borderRadius: '6px'
}, children: [_jsx("strong", { style: { display: 'block', marginBottom: '4px' }, children: "Error" }), error.message] })) }));
}
var Error = function (_a) {
var children = _a.children;
var firstRender = useRef(false);
var handleReload = useCallback(function () {
if (!firstRender.current) {
firstRender.current = true;
promise(1500).then(function () {
window.location.reload();
});
}
}, []);
return (_jsx(ErrorBoundary, { FallbackComponent: Fallback, onError: function () {
if (process.env.NODE_ENV === 'production') {
handleReload();
}
}, children: children }));
};
var LoadingScreen = function () {
useEffect(function () {
NProgress.start();
return function () {
NProgress.done();
};
}, []);
return (_jsx("div", { style: {
backgroundColor: '#fff',
minHeight: '100vh',
} }));
};
export var LazyLoader = function (importFunc) {
var Component = lazy(importFunc);
return function (props) { return (_jsx(Error, { children: _jsx(Suspense, { fallback: _jsx(LoadingScreen, {}), children: _jsx(Component, __assign({}, props)) }) })); };
};