gnx/GNX-WEB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Iliyan Angelov
2025-09-26 00:45:31 +03:00
parent 1e316a763a
commit 3f5bcfad68
2821 changed files with 1043 additions and 38155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
gnx-react/components/shared/layout/LayoutWrapper.tsx Normal file
View File

@@ -0,0 +1,17 @@
"use client";
import { ReactNode } from "react";
import Preloader from "./Preloader";
interface LayoutWrapperProps {
children: ReactNode;
}
const LayoutWrapper = ({ children }: LayoutWrapperProps) => {
return (
<Preloader>
{children}
</Preloader>
);
};
export default LayoutWrapper;

387
gnx-react/components/shared/layout/Preloader.tsx Normal file
View File

@@ -0,0 +1,387 @@
"use client";
import { useState, useEffect } from "react";
import { usePathname } from "next/navigation";
import Image from "next/image";
interface PreloaderProps {
children: React.ReactNode;
}
const Preloader = ({ children }: PreloaderProps) => {
const [isLoading, setIsLoading] = useState(true);
const [progress, setProgress] = useState(0);
const [currentPath, setCurrentPath] = useState("");
const pathname = usePathname();
// Debug mode - set to true to see console logs
const DEBUG = false;
// Skip preloader for faster development/testing (set to true to disable preloader)
const SKIP_PRELOADER = false;
// Fast mode - set to true for even faster loading (200ms total)
const FAST_MODE = true;
useEffect(() => {
// Only show preloader if path has changed or it's initial load
if (currentPath !== pathname) {
if (DEBUG) console.log('Preloader: Starting transition from', currentPath, 'to', pathname);
setIsLoading(true);
setProgress(0);
// Simulate loading progress - faster and more responsive
const progressInterval = setInterval(() => {
setProgress((prev) => {
if (prev >= 85) {
clearInterval(progressInterval);
return 85;
}
return prev + Math.random() * 25 + 10; // Faster progress increments
});
}, 50); // Reduced interval from 100ms to 50ms for smoother animation
// Complete loading much faster - adjust timing based on FAST_MODE
const loadingDuration = FAST_MODE ? 200 : 400;
const fadeOutDuration = FAST_MODE ? 50 : 100;
const completeTimer = setTimeout(() => {
setProgress(100);
setTimeout(() => {
if (DEBUG) console.log('Preloader: Transition complete');
setIsLoading(false);
setCurrentPath(pathname);
}, fadeOutDuration);
}, loadingDuration);
// Fallback: Force complete after reasonable time
const fallbackDuration = FAST_MODE ? 800 : 1500;
const fallbackTimer = setTimeout(() => {
if (DEBUG) console.log('Preloader: Fallback triggered - force completing');
setIsLoading(false);
setCurrentPath(pathname);
setProgress(100);
}, fallbackDuration);
return () => {
clearInterval(progressInterval);
clearTimeout(completeTimer);
clearTimeout(fallbackTimer);
};
}
}, [pathname, currentPath, DEBUG, FAST_MODE]);
// Skip preloader entirely if SKIP_PRELOADER is true
if (SKIP_PRELOADER) {
return <>{children}</>;
}
// Don't show preloader if not loading
if (!isLoading) {
return <>{children}</>;
}
return (
<>
<div className="preloader-overlay">
<div className="preloader-container">
{/* Logo with shine effect */}
<div className="preloader-logo">
<div className="logo-wrapper">
<Image
src="/images/logo.png"
alt="GNX Logo"
width={80}
height={60}
className="logo-image"
priority
/>
<div className="shine-effect"></div>
</div>
</div>
{/* Progress bar */}
<div className="progress-container">
<div className="progress-bar">
<div
className="progress-fill"
style={{ width: `${progress}%` }}
></div>
</div>
<div className="progress-text">{Math.round(progress)}%</div>
</div>
{/* Loading text */}
<div className="loading-text">
<span className="loading-dots">
<span>.</span>
<span>.</span>
<span>.</span>
</span>
</div>
{/* Enterprise tagline */}
<div className="enterprise-tagline">
<span>Enterprise Solutions</span>
<span>Excellence in Every Project</span>
</div>
</div>
</div>
<style jsx>{`
.preloader-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
backdrop-filter: blur(10px);
}
.preloader-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
text-align: center;
}
.preloader-logo {
position: relative;
animation: logoFloat 2s ease-in-out infinite;
}
.logo-wrapper {
position: relative;
display: inline-block;
padding: 1.5rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
transition: all 0.2s ease; /* Faster transitions */
}
.logo-image {
position: relative;
z-index: 2;
filter: brightness(1.1);
transition: all 0.2s ease; /* Faster transitions */
}
.shine-effect {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
animation: shine 2s infinite;
z-index: 3;
}
.progress-container {
width: 200px;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.progress-bar {
width: 100%;
height: 3px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #4f46e5, #7c3aed, #ec4899);
border-radius: 2px;
transition: width 0.2s ease; /* Faster progress bar animation */
position: relative;
overflow: hidden;
}
.progress-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.6),
transparent
);
animation: progressShine 1.5s infinite;
}
.progress-text {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
letter-spacing: 0.05em;
}
.loading-text {
color: rgba(255, 255, 255, 0.6);
font-size: 0.875rem;
font-weight: 400;
letter-spacing: 0.1em;
}
.loading-dots {
display: inline-flex;
gap: 0.25rem;
}
.loading-dots span {
animation: dotPulse 1.4s infinite ease-in-out;
animation-fill-mode: both;
}
.loading-dots span:nth-child(1) {
animation-delay: -0.32s;
}
.loading-dots span:nth-child(2) {
animation-delay: -0.16s;
}
.loading-dots span:nth-child(3) {
animation-delay: 0s;
}
.enterprise-tagline {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin-top: 1rem;
text-align: center;
}
.enterprise-tagline span {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.5);
font-weight: 300;
letter-spacing: 0.15em;
text-transform: uppercase;
animation: fadeInUp 0.8s ease-out 0.5s both;
}
.enterprise-tagline span:first-child {
animation-delay: 0.7s;
}
.enterprise-tagline span:last-child {
animation-delay: 0.9s;
}
@keyframes logoFloat {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
@keyframes shine {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
@keyframes progressShine {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes dotPulse {
0%, 80%, 100% {
opacity: 0.3;
transform: scale(0.8);
}
40% {
opacity: 1;
transform: scale(1);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
.preloader-container {
gap: 1.5rem;
}
.logo-wrapper {
padding: 1rem;
}
.logo-image {
width: 60px;
height: 45px;
}
.progress-container {
width: 150px;
}
}
@media (max-width: 480px) {
.preloader-container {
gap: 1rem;
}
.logo-wrapper {
padding: 0.75rem;
}
.logo-image {
width: 50px;
height: 37px;
}
.progress-container {
width: 120px;
}
}
`}</style>
</>
);
};
export default Preloader;

106
gnx-react/components/shared/layout/README-Preloader.md Normal file
View File

@@ -0,0 +1,106 @@
# Preloader Component Documentation
## Overview
The Preloader component provides a sophisticated, enterprise-grade loading experience for the GNX React application. It features a compact design with the company logo, shine effects, and smooth animations that activate during page transitions.
## Features
### 🎨 Enterprise Design
- **Compact Layout**: Minimal, professional design that doesn't overwhelm users
- **Company Logo**: Features the GNX logo with floating animation
- **Shine Effect**: Animated shine effect that sweeps across the logo periodically
- **Dark Theme**: Professional dark gradient background with subtle transparency
### ⚡ Smart Loading Logic
- **Initial Load**: Shows for 1.5 seconds on first page load
- **Page Transitions**: Activates automatically when navigating between pages
- **Progress Bar**: Realistic loading progress with gradient colors
- **Smooth Transitions**: Fade-in/out animations for seamless user experience
### 📱 Responsive Design
- **Mobile Optimized**: Scales appropriately on all device sizes
- **Touch Friendly**: Optimized for mobile interactions
- **Performance**: Lightweight animations that don't impact performance
## Components
### 1. Preloader.tsx
Main preloader component that handles the loading UI and animations.
**Key Features:**
- Logo with shine effect animation
- Progress bar with gradient fill
- Loading dots animation
- Enterprise tagline
- Responsive design
### 2. LayoutWrapper.tsx
Wrapper component that integrates the preloader with the main layout.
### 3. usePageTransition.ts
Custom hook that manages page transition states and progress.
**Hook Methods:**
- `isTransitioning`: Boolean indicating if a transition is active
- `progress`: Current loading progress (0-100)
- `startTransition()`: Initiates a new page transition
- `updateProgress()`: Updates the loading progress
- `completeTransition()`: Marks transition as complete
## Usage
The preloader is automatically integrated into the main layout and requires no additional setup. It will:
1. **Show on initial page load** for 1.5 seconds
2. **Activate on page navigation** with realistic loading simulation
3. **Display progress** with animated progress bar
4. **Hide smoothly** when loading is complete
## Customization
### Logo
To change the logo, update the image path in the Preloader component:
```tsx
<Image
src="/images/logo.png" // Update this path
alt="GNX Logo"
width={80}
height={60}
className="logo-image"
priority
/>
```
### Colors
The preloader uses CSS custom properties that can be customized:
- Background gradient colors
- Progress bar gradient
- Text colors and opacity
### Timing
Adjust timing in the usePageTransition hook:
- Initial load duration: 1500ms
- Transition duration: 600-1000ms (randomized)
- Progress update interval: 100ms
## Performance Considerations
- **Optimized Animations**: Uses CSS transforms and opacity for smooth performance
- **Minimal DOM**: Lightweight component structure
- **Smart Loading**: Only shows when necessary (transitions)
- **Memory Efficient**: Proper cleanup of timers and intervals
## Browser Support
- **Modern Browsers**: Full support for Chrome, Firefox, Safari, Edge
- **Mobile Browsers**: Optimized for iOS Safari and Chrome Mobile
- **Fallbacks**: Graceful degradation for older browsers
## Future Enhancements
Potential improvements for future versions:
- Custom loading messages per page
- Brand-specific color themes
- Loading state indicators for API calls
- Accessibility improvements (reduced motion support)
- Analytics integration for loading performance

2
gnx-react/components/shared/layout/header/OffcanvasMenu.tsx
View File

@@ -110,7 +110,7 @@ const OffcanvasMenu = ({
<span className="text-danger">Failed to load services</span>
</li>
) : (
item.submenu.map((subItem, subIndex) => (
item.submenu.map((subItem: any, subIndex: number) => (
<li key={subIndex}>
<Link
href={subItem.path || "#"}