fix: remove dark backgrounds causing black rectangles

- PageLoader: remove bg-dark-950, use transparent background
- AdminLayout: remove motion animations
- Now lazy-loaded pages show Aurora background during loading
This commit is contained in:
c0mrade
2026-02-01 21:57:13 +03:00
parent dda8323b45
commit 2926a5a89c
2 changed files with 4 additions and 52 deletions

View File

@@ -1,61 +1,14 @@
import { motion } from 'framer-motion';
import type { Transition, Variants } from 'framer-motion';
import type { ReactNode } from 'react';
/**
* Centralized animation config for all admin pages.
* Change animations here to affect all admin pages at once.
*/
export const adminPageTransition: Transition = {
duration: 0.15,
ease: [0.16, 1, 0.3, 1] as const, // easeOutExpo
};
export const adminPageVariants: Variants = {
initial: { opacity: 0 },
animate: { opacity: 1 },
exit: { opacity: 0 },
};
interface AdminLayoutProps {
children: ReactNode;
className?: string;
}
/**
* AdminLayout - wrapper for all admin pages with consistent animations.
* Use this to wrap admin page content for unified transitions.
* AdminLayout - wrapper for all admin pages.
* Animations removed to prevent black flash during transitions.
*/
export function AdminLayout({ children, className }: AdminLayoutProps) {
return (
<motion.div
variants={adminPageVariants}
initial="initial"
animate="animate"
exit="exit"
transition={adminPageTransition}
className={className}
>
{children}
</motion.div>
);
return <div className={className}>{children}</div>;
}
/**
* Admin content animations for lists and cards.
* Use with staggered children.
*/
export const adminStaggerContainer: Variants = {
initial: {},
animate: {
transition: {
staggerChildren: 0.03,
},
},
};
export const adminStaggerItem: Variants = {
initial: { opacity: 0 },
animate: { opacity: 1 },
exit: { opacity: 0 },
};

View File

@@ -3,11 +3,10 @@ interface PageLoaderProps {
}
export default function PageLoader({ variant = 'dark' }: PageLoaderProps) {
const bgClass = variant === 'dark' ? 'bg-dark-950' : 'bg-gray-50';
const spinnerColor = variant === 'dark' ? 'border-accent-500' : 'border-blue-500';
return (
<div className={`flex min-h-screen items-center justify-center ${bgClass}`}>
<div className="flex min-h-[50vh] items-center justify-center">
<div
className={`h-10 w-10 border-[3px] ${spinnerColor} animate-spin rounded-full border-t-transparent`}
/>