From 2926a5a89c522b2133b9f56eef950031c0f7f2c1 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Sun, 1 Feb 2026 21:57:13 +0300
Subject: [PATCH] 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
---
 src/components/admin/AdminLayout.tsx | 53 ++--------------------------
 src/components/common/PageLoader.tsx |  3 +-
 2 files changed, 4 insertions(+), 52 deletions(-)

diff --git a/src/components/admin/AdminLayout.tsx b/src/components/admin/AdminLayout.tsx
index fee616d..526f5ae 100644
--- a/src/components/admin/AdminLayout.tsx
+++ b/src/components/admin/AdminLayout.tsx
@@ -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 },
-};
diff --git a/src/components/common/PageLoader.tsx b/src/components/common/PageLoader.tsx
index ae7e4d0..4f1ade8 100644
--- a/src/components/common/PageLoader.tsx
+++ b/src/components/common/PageLoader.tsx
@@ -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`}
       />