infinity-forge
Version:
42 lines • 3.46 kB
JavaScript
"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.LoaderOnRouteChange = LoaderOnRouteChange;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var react_dom_1 = __importDefault(require("react-dom"));
var router_1 = __importDefault(require("next/router"));
var styled_components_1 = __importDefault(require("styled-components"));
var ui_1 = require("../../../ui/index.js");
var StylesRoute = (0, styled_components_1.default)('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n position: fixed;\n top: 0;\n left: 0;\n height: 5px;\n animation-duration: 1.8s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: placeHolderShimmer;\n animation-timing-function: linear;\n background: ", ";\n background: ", ";\n position: fixed;\n top: 0;\n right: 0;\n z-index: 99;\n\n @keyframes placeHolderShimmer {\n 0% {\n background-position: 0px 0;\n }\n 100% {\n background-position: 100vw 0;\n }\n }\n"], ["\n width: 100%;\n position: fixed;\n top: 0;\n left: 0;\n height: 5px;\n animation-duration: 1.8s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: placeHolderShimmer;\n animation-timing-function: linear;\n background: ", ";\n background: ", ";\n position: fixed;\n top: 0;\n right: 0;\n z-index: 99;\n\n @keyframes placeHolderShimmer {\n 0% {\n background-position: 0px 0;\n }\n 100% {\n background-position: 100vw 0;\n }\n }\n"])), function (props) { return props.theme.primaryColor; }, function (props) { return "linear-gradient(\n to right,\n ".concat(props.theme.primaryColor, " 8%,\n #fff 25%,\n ").concat(props.theme.primaryColor, " 33%\n )"); });
function LoaderOnRouteChange(_a) {
var children = _a.children, enabled = _a.enabled, Component = _a.Component;
var _b = (0, react_1.useState)(false), loading = _b[0], setLoading = _b[1];
var window = (0, ui_1.useWindow)();
(0, react_1.useEffect)(function () {
var start = function () {
setLoading(true);
};
var end = function () {
setLoading(false);
};
router_1.default.events.on('routeChangeStart', start);
router_1.default.events.on('routeChangeComplete', end);
router_1.default.events.on('routeChangeError', end);
return function () {
router_1.default.events.off('routeChangeStart', start);
router_1.default.events.off('routeChangeComplete', end);
router_1.default.events.off('routeChangeError', end);
};
}, []);
var ComponentLoader = Component || StylesRoute;
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [window && enabled && react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { className: 'loader_routing_infinity_forge', children: loading && (0, jsx_runtime_1.jsx)(ComponentLoader, {}) }), document.body), children] }));
}
var templateObject_1;
//# sourceMappingURL=index.js.map