matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: use the same loading animation longer

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-10-13 19:49:12 +02:00
parent 6f8c44d237
commit c2a3221667
3 changed files with 10 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/pl-fe/src/components/landing-gradient.tsx
View File

@ -1,8 +0,0 @@
import React from 'react';
/** Fullscreen gradient used as a backdrop to public pages. */
const LandingGradient: React.FC = () => (
<div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 via-white to-gradient-end/10 black:hidden dark:from-primary-900/50 dark:via-primary-900 dark:to-primary-800/50' />
);
export { LandingGradient as default };

20
packages/pl-fe/src/components/loading-screen.tsx
View File

@ -1,24 +1,16 @@
import React from 'react';
import LandingGradient from 'pl-fe/components/landing-gradient';
import Spinner from 'pl-fe/components/ui/spinner';
import { useSettings } from 'pl-fe/hooks/use-settings';
/** Fullscreen loading indicator. */
const LoadingScreen: React.FC = React.memo(() => {
const { theme } = useSettings();
const LoadingScreen: React.FC = () => {
return (
<div className='fixed h-screen w-screen'>
{(theme?.backgroundGradient ?? true) && <LandingGradient />}
<div className='d-screen fixed z-10 flex w-screen items-center justify-center'>
<div className='p-4'>
<Spinner size={40} withText={false} />
<div className='loading-indicator-wrapper'>
<div className='loading-indicator'>
<div className='loading-indicator__container'>
<div className='loading-indicator__figure' />
</div>
</div>
</div>
);
});
};
export { LoadingScreen as default };

9
packages/pl-fe/src/styles/loading.scss
View File

@ -3,7 +3,7 @@
}
.loading-indicator {
@apply text-gray-50 text-xs uppercase flex flex-col items-center justify-center overflow-visible;
@apply text-gray-50 dark:text-gray-800 text-xs uppercase flex flex-col items-center justify-center overflow-visible;
}
.loading-indicator__container {
@ -11,10 +11,9 @@
}
.loading-indicator__figure {
@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-transparent;
@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-transparent dark:bg-transparent border-[#e5e7eb] dark:border-gray-800;
border: 0 solid;
border-width: 6px;
border-color: #e5e7eb;
}
.no-reduce-motion .loading-indicator__figure {
@ -25,13 +24,13 @@
@apply h-screen w-screen items-center;
&__figure {
@apply border-gray-200;
@apply border-gray-200 dark:border-gray-800;
}
}
@keyframes loader-figure {
0% {
@apply bg-gray-200 w-0 h-0;
@apply bg-yellow-200 w-0 h-0;
}
29% {