mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 09:33:46 +00:00
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:
@@ -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 },
|
||||
};
|
||||
|
||||
@@ -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`}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user