mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-07-31 06:01:24 +00:00
more color fixes
This commit is contained in:
@@ -1,7 +1,19 @@
|
||||
import React from 'react'
|
||||
import './customloader.css'
|
||||
import React from 'react';
|
||||
import './customloader.css';
|
||||
import { Box, useTheme } from '@mui/material';
|
||||
export const CustomLoader = () => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
|
||||
)
|
||||
}
|
||||
<Box
|
||||
sx={{
|
||||
'--text-primary': theme.palette.text.primary,
|
||||
}}
|
||||
className="lds-ellipsis"
|
||||
>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
@@ -1,28 +1,29 @@
|
||||
import React, { useState, useEffect, useRef } from 'react'
|
||||
import { useInView } from 'react-intersection-observer'
|
||||
import CircularProgress from '@mui/material/CircularProgress'
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { useInView } from 'react-intersection-observer';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import { useTheme } from '@mui/material';
|
||||
|
||||
interface Props {
|
||||
onLoadMore: () => Promise<void>
|
||||
onLoadMore: () => Promise<void>;
|
||||
}
|
||||
|
||||
const LazyLoad: React.FC<Props> = ({ onLoadMore }) => {
|
||||
const [isFetching, setIsFetching] = useState<boolean>(false)
|
||||
|
||||
const firstLoad = useRef(false)
|
||||
const [isFetching, setIsFetching] = useState<boolean>(false);
|
||||
const theme = useTheme();
|
||||
const firstLoad = useRef(false);
|
||||
const [ref, inView] = useInView({
|
||||
threshold: 0.7
|
||||
})
|
||||
threshold: 0.7,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (inView) {
|
||||
setIsFetching(true)
|
||||
setIsFetching(true);
|
||||
onLoadMore().finally(() => {
|
||||
setIsFetching(false)
|
||||
firstLoad.current = true
|
||||
})
|
||||
setIsFetching(false);
|
||||
firstLoad.current = true;
|
||||
});
|
||||
}
|
||||
}, [inView])
|
||||
}, [inView]);
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -30,18 +31,22 @@ const LazyLoad: React.FC<Props> = ({ onLoadMore }) => {
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
minHeight: '25px'
|
||||
minHeight: '25px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
visibility: isFetching ? 'visible' : 'hidden'
|
||||
visibility: isFetching ? 'visible' : 'hidden',
|
||||
}}
|
||||
>
|
||||
<CircularProgress />
|
||||
<CircularProgress
|
||||
sx={{
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default LazyLoad
|
||||
export default LazyLoad;
|
||||
|
@@ -1,5 +1,5 @@
|
||||
.lds-ellipsis {
|
||||
color: white;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.lds-ellipsis,
|
||||
.lds-ellipsis div {
|
||||
|
Reference in New Issue
Block a user