Render loading state if not ready
This commit is contained in:
39
dist/app-boot.js
vendored
39
dist/app-boot.js
vendored
@@ -15088,6 +15088,7 @@ var UniqueFeatureSlider = () => {
|
|||||||
const trackRef = React.useRef(null);
|
const trackRef = React.useRef(null);
|
||||||
const wrapRef = React.useRef(null);
|
const wrapRef = React.useRef(null);
|
||||||
const [current, setCurrent] = React.useState(0);
|
const [current, setCurrent] = React.useState(0);
|
||||||
|
const [isReady, setIsReady] = React.useState(false);
|
||||||
const slides = [
|
const slides = [
|
||||||
{
|
{
|
||||||
icon: "\u{1F6E1}\uFE0F",
|
icon: "\u{1F6E1}\uFE0F",
|
||||||
@@ -15125,6 +15126,12 @@ var UniqueFeatureSlider = () => {
|
|||||||
description: "No registration, no servers, no logs. Complete anonymity with instant channels."
|
description: "No registration, no servers, no logs. Complete anonymity with instant channels."
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
React.useEffect(() => {
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
setIsReady(true);
|
||||||
|
}, 100);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}, []);
|
||||||
const isMobile = () => window.matchMedia("(max-width:767px)").matches;
|
const isMobile = () => window.matchMedia("(max-width:767px)").matches;
|
||||||
const center = React.useCallback((i) => {
|
const center = React.useCallback((i) => {
|
||||||
if (!trackRef.current || !wrapRef.current) return;
|
if (!trackRef.current || !wrapRef.current) return;
|
||||||
@@ -15158,15 +15165,41 @@ var UniqueFeatureSlider = () => {
|
|||||||
return () => window.removeEventListener("keydown", handleKeydown);
|
return () => window.removeEventListener("keydown", handleKeydown);
|
||||||
}, [current]);
|
}, [current]);
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
center(current);
|
if (isReady) {
|
||||||
}, [current, center]);
|
center(current);
|
||||||
|
}
|
||||||
|
}, [current, center, isReady]);
|
||||||
|
if (!isReady) {
|
||||||
|
return React.createElement(
|
||||||
|
"section",
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
background: "transparent",
|
||||||
|
minHeight: "400px",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
React.createElement("div", {
|
||||||
|
style: {
|
||||||
|
opacity: 0.5,
|
||||||
|
fontSize: "14px",
|
||||||
|
color: "#fff"
|
||||||
|
}
|
||||||
|
}, "Loading...")
|
||||||
|
);
|
||||||
|
}
|
||||||
return React.createElement("section", { style: { background: "transparent" } }, [
|
return React.createElement("section", { style: { background: "transparent" } }, [
|
||||||
// Header
|
// Header
|
||||||
React.createElement("div", {
|
React.createElement("div", {
|
||||||
key: "head",
|
key: "head",
|
||||||
className: "head"
|
className: "head"
|
||||||
}, [
|
}, [
|
||||||
React.createElement("h2", { key: "title", className: "text-2xl sm:text-3xl font-bold text-white mb-4 leading-snug" }, "Why SecureBit.chat is unique"),
|
React.createElement("h2", {
|
||||||
|
key: "title",
|
||||||
|
className: "text-2xl sm:text-3xl font-bold text-white mb-4 leading-snug"
|
||||||
|
}, "Why SecureBit.chat is unique"),
|
||||||
React.createElement("div", {
|
React.createElement("div", {
|
||||||
key: "controls",
|
key: "controls",
|
||||||
className: "controls"
|
className: "controls"
|
||||||
|
|||||||
4
dist/app-boot.js.map
vendored
4
dist/app-boot.js.map
vendored
File diff suppressed because one or more lines are too long
@@ -1,8 +1,9 @@
|
|||||||
// Enhanced Modern Slider Component with Original CSS Classes
|
// Enhanced Modern Slider Component with Loading Protection
|
||||||
const UniqueFeatureSlider = () => {
|
const UniqueFeatureSlider = () => {
|
||||||
const trackRef = React.useRef(null);
|
const trackRef = React.useRef(null);
|
||||||
const wrapRef = React.useRef(null);
|
const wrapRef = React.useRef(null);
|
||||||
const [current, setCurrent] = React.useState(0);
|
const [current, setCurrent] = React.useState(0);
|
||||||
|
const [isReady, setIsReady] = React.useState(false);
|
||||||
|
|
||||||
const slides = [
|
const slides = [
|
||||||
{
|
{
|
||||||
@@ -42,6 +43,14 @@ const UniqueFeatureSlider = () => {
|
|||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// Проверка готовности компонента
|
||||||
|
React.useEffect(() => {
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
setIsReady(true);
|
||||||
|
}, 100);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}, []);
|
||||||
|
|
||||||
const isMobile = () => window.matchMedia("(max-width:767px)").matches;
|
const isMobile = () => window.matchMedia("(max-width:767px)").matches;
|
||||||
|
|
||||||
const center = React.useCallback((i) => {
|
const center = React.useCallback((i) => {
|
||||||
@@ -83,8 +92,30 @@ const UniqueFeatureSlider = () => {
|
|||||||
}, [current]);
|
}, [current]);
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
center(current);
|
if (isReady) {
|
||||||
}, [current, center]);
|
center(current);
|
||||||
|
}
|
||||||
|
}, [current, center, isReady]);
|
||||||
|
// Render loading state if not ready
|
||||||
|
if (!isReady) {
|
||||||
|
return React.createElement('section', {
|
||||||
|
style: {
|
||||||
|
background: 'transparent',
|
||||||
|
minHeight: '400px',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
React.createElement('div', {
|
||||||
|
style: {
|
||||||
|
opacity: 0.5,
|
||||||
|
fontSize: '14px',
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
}, 'Loading...')
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return React.createElement('section', { style: { background: 'transparent' } }, [
|
return React.createElement('section', { style: { background: 'transparent' } }, [
|
||||||
// Header
|
// Header
|
||||||
@@ -92,7 +123,10 @@ const UniqueFeatureSlider = () => {
|
|||||||
key: 'head',
|
key: 'head',
|
||||||
className: 'head'
|
className: 'head'
|
||||||
}, [
|
}, [
|
||||||
React.createElement('h2', { key: 'title', className: 'text-2xl sm:text-3xl font-bold text-white mb-4 leading-snug' }, 'Why SecureBit.chat is unique'),
|
React.createElement('h2', {
|
||||||
|
key: 'title',
|
||||||
|
className: 'text-2xl sm:text-3xl font-bold text-white mb-4 leading-snug'
|
||||||
|
}, 'Why SecureBit.chat is unique'),
|
||||||
React.createElement('div', {
|
React.createElement('div', {
|
||||||
key: 'controls',
|
key: 'controls',
|
||||||
className: 'controls'
|
className: 'controls'
|
||||||
|
|||||||
Reference in New Issue
Block a user