@rocket.chat/onboarding-ui
Version:
Set of components and functions for the onboarding experience on Rocket.Chat
27 lines • 1.68 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const fuselage_1 = require("@rocket.chat/fuselage");
const layout_1 = require("@rocket.chat/layout");
const react_1 = require("react");
const LoaderPage = ({ title, subtitles, isReady = false, loadingSeconds = 90, }) => {
const timeFraction = 100 / subtitles.length;
const [percentage, setPercentage] = (0, react_1.useState)(() => (isReady ? 100 : 0));
(0, react_1.useEffect)(() => {
if (isReady) {
setPercentage(100);
return;
}
const interval = (loadingSeconds * 1000) / 100;
const timer = setInterval(() => {
setPercentage((prev) => (prev === 99 ? 99 : prev + 1));
}, interval);
return () => {
clearInterval(timer);
};
}, [isReady]);
const subtitleIndex = Math.floor(percentage / timeFraction);
return ((0, jsx_runtime_1.jsx)(layout_1.BackgroundLayer, { children: (0, jsx_runtime_1.jsx)(fuselage_1.Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', width: '100%', maxWidth: 768, paddingBlock: 32, paddingInline: 16, children: (0, jsx_runtime_1.jsxs)(fuselage_1.Margins, { blockEnd: 32, children: [(0, jsx_runtime_1.jsx)(layout_1.LayoutLogo, {}), (0, jsx_runtime_1.jsx)(fuselage_1.Box, { fontScale: 'hero', children: title }), (0, jsx_runtime_1.jsx)(fuselage_1.Box, { fontScale: 'p1b', children: subtitles[subtitleIndex] }), (0, jsx_runtime_1.jsx)(fuselage_1.ProgressBar, { percentage: percentage })] }) }) }));
};
exports.default = LoaderPage;
//# sourceMappingURL=LoaderPage.js.map