External/CoreControl
1
0
Fork 0
mirror of https://github.com/crocofied/CoreControl.git synced 2025-12-17 23:47:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Loading Spinner during Data load

Browse Source
This commit is contained in:
headlessdev 2025-04-12 17:40:37 +02:00
parent 50ccd4ebcd
commit fd3e81b5c1
2 changed files with 155 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/dashboard/applications/Applications.tsx
View File

@ -72,6 +72,7 @@ export default function Dashboard() {
const [applications, setApplications] = useState([]); const [applications, setApplications] = useState([]);
const [servers, setServers] = useState([]); const [servers, setServers] = useState([]);
const [isGridLayout, setIsGridLayout] = useState(false); const [isGridLayout, setIsGridLayout] = useState(false);
const [loading, setLoading] = useState(true);
useEffect(() => { useEffect(() => {
const savedLayout = Cookies.get('layoutPreference'); const savedLayout = Cookies.get('layoutPreference');
@ -109,10 +110,12 @@ export default function Dashboard() {
const getApplications = async () => { const getApplications = async () => {
try { try {
setLoading(true)
const response = await axios.post('/api/applications/get', { page: currentPage, ITEMS_PER_PAGE: itemsPerPage }); const response = await axios.post('/api/applications/get', { page: currentPage, ITEMS_PER_PAGE: itemsPerPage });
setApplications(response.data.applications); setApplications(response.data.applications);
setServers(response.data.servers); setServers(response.data.servers);
setMaxPage(response.data.maxPage); setMaxPage(response.data.maxPage);
setLoading(false)
} catch (error: any) { } catch (error: any) {
console.log(error.response); console.log(error.response);
} }
@ -235,6 +238,7 @@ export default function Dashboard() {
</div> </div>
</div> </div>
<br /> <br />
{!loading ?
<div className={isGridLayout ? <div className={isGridLayout ?
"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" : "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" :
"space-y-4"}> "space-y-4"}>
@ -306,6 +310,23 @@ export default function Dashboard() {
</Card> </Card>
))} ))}
</div> </div>
:
<div className="flex items-center justify-center">
<div className='inline-block' role='status' aria-label='loading'>
<svg className='w-6 h-6 stroke-white animate-spin ' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<g clip-path='url(#clip0_9023_61563)'>
<path d='M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444' stroke='stroke-current' stroke-width='1.4' stroke-linecap='round' class='my-path'></path>
</g>
<defs>
<clipPath id='clip0_9023_61563'>
<rect width='24' height='24' fill='white'></rect>
</clipPath>
</defs>
</svg>
<span className='sr-only'>Loading...</span>
</div>
</div>
}
<div className="pt-4"> <div className="pt-4">
<Pagination> <Pagination>
<PaginationContent> <PaginationContent>

21
app/dashboard/servers/Servers.tsx
View File

@ -73,6 +73,7 @@ export default function Dashboard() {
const [maxPage, setMaxPage] = useState(1); const [maxPage, setMaxPage] = useState(1);
const [servers, setServers] = useState([]); const [servers, setServers] = useState([]);
const [isGridLayout, setIsGridLayout] = useState(false); const [isGridLayout, setIsGridLayout] = useState(false);
const [loading, setLoading] = useState(true);
useEffect(() => { useEffect(() => {
const savedLayout = Cookies.get('layoutPreference'); const savedLayout = Cookies.get('layoutPreference');
@ -100,9 +101,11 @@ export default function Dashboard() {
const getServers = async () => { const getServers = async () => {
try { try {
setLoading(true);
const response = await axios.post('/api/servers/get', { page: currentPage }); const response = await axios.post('/api/servers/get', { page: currentPage });
setServers(response.data.servers); setServers(response.data.servers);
setMaxPage(response.data.maxPage); setMaxPage(response.data.maxPage);
setLoading(false);
} catch (error: any) { } catch (error: any) {
console.log(error.response); console.log(error.response);
} }
@ -237,6 +240,7 @@ export default function Dashboard() {
</div> </div>
</div> </div>
<br /> <br />
{!loading ?
<div className={isGridLayout ? <div className={isGridLayout ?
"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" : "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" :
"space-y-4"}> "space-y-4"}>
@ -293,6 +297,23 @@ export default function Dashboard() {
</Card> </Card>
))} ))}
</div> </div>
:
<div className="flex items-center justify-center">
<div className='inline-block' role='status' aria-label='loading'>
<svg className='w-6 h-6 stroke-white animate-spin ' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<g clip-path='url(#clip0_9023_61563)'>
<path d='M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444' stroke='stroke-current' stroke-width='1.4' stroke-linecap='round' class='my-path'></path>
</g>
<defs>
<clipPath id='clip0_9023_61563'>
<rect width='24' height='24' fill='white'></rect>
</clipPath>
</defs>
</svg>
<span className='sr-only'>Loading...</span>
</div>
</div>
}
<div className="pt-4"> <div className="pt-4">
<Pagination> <Pagination>
<PaginationContent> <PaginationContent>