Loading States & Transitions
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Wasalny landing page implements a sophisticated system for managing initial application loading and component-level transitions to ensure a high-quality user experience. The primary mechanism is a centralized PageLoader component that manages the entry sequence of the application, combined with GSAP-powered transitions for section reveals and image carousels.
These loading states are designed to prevent "Flash of Unstyled Content" (FOUC) and to provide visual feedback while the core assets and layouts are initialized. The transition system relies heavily on the GreenSock Animation Platform (GSAP) and custom React hooks to synchronize visual updates with the application's lifecycle.
Initial Page Loading Architecture
The application's entry point uses a state-driven approach to control the visibility of the main content versus the preloader.
The App Lifecycle
In App.tsx, an isLoading state is initialized to true. While this state is active, the PageLoader component is rendered, and the main content is hidden or restricted. The PageLoader executes a timed sequence of animations before triggering an onComplete callback that sets isLoading to false.
Sources: src/App.tsx:28-33, src/components/ui/PageLoader.tsx:14-25
Scroll Management
To maintain visual integrity during the loading phase, the system explicitly disables document scrolling. This is achieved through a useEffect hook that modifies the body.style.overflow property based on the isComplete state of the loader.
Sources: src/components/ui/PageLoader.tsx:58-66
The following diagram illustrates the lifecycle of the initial page load:
PageLoader Implementation Details
The PageLoader component utilizes a GSAP timeline to coordinate multiple visual elements.
Components of the Loader
| Element | Animation Type | Timing/Ease |
|---|---|---|
| Logo | Scale, Rotation, Opacity | duration: 0.8, ease: "back.out(1.7)" |
| Text | Vertical Translation (Y), Opacity | duration: 0.5, ease: "power2.out" |
| Progress Bar | scaleX (Origin Right) | duration: minDuration / 1000 |
| Container | yPercent (-100) | duration: 0.8, ease: "power3.inOut" |
Sources: src/components/ui/PageLoader.tsx:27-56
Animation Logic
The loader defaults to a minDuration of 2000ms. The progress bar animation is synchronized to this duration, ensuring the user is presented with a consistent brand experience regardless of actual network speed, though it primarily acts as a perceived performance buffer.
Sources: src/components/ui/PageLoader.tsx:10-12
Component-Level Transitions
Beyond the initial load, the application uses several specialized hooks and components to manage state transitions within sections.
Batch Reveal Transitions
Grid-based layouts, such as those in FeaturesSection and CTASection, use the useBatchReveal hook. This utility manages the staggered entrance of elements as they enter the viewport, controlled by ScrollTrigger.
Sources: src/hooks/useAnimations.ts:219-253, src/components/sections/FeaturesSection.tsx:162-173
Image and Carousel Transitions
The project features complex image transitions in the AppShowcaseSection and FleetSection.
- AppShowcase: Uses
gsap.fromToon thecurrentIndexdependency to animate image scale and opacity during carousel navigation. Sources: src/components/sections/AppShowcaseSection.tsx:88-95 - FleetSection: Implements a 3D carousel transition. Images are positioned using
xPercent,zdepth, androtationY. The transition is calculated based on theoffsetfrom the current active index. Sources: src/components/sections/FleetSection.tsx:156-173
SVG Path Transitions
The RoutesSection utilizes useDrawPath to animate SVG strokes (representing travel routes) and location markers. This creates a transition from an empty map to a fully populated route guide.
Global Transition Configuration
The system defines global animation constants and CSS keyframes to maintain consistency across different transition types.
GSAP Global Config
Transitions utilize a standardized configuration for easing and triggers defined in the animation library.
Sources: src/hooks/useAnimations.ts:3-10
CSS-Based Animations
Standardized CSS animations are defined in the @theme block for secondary transitions:
float: 3s ease-in-out infiniteshimmer: 2s linear infinite (used for image loading placeholders)car-drive: 8s linear infinite
Sources: src/index.css:32-41, src/components/sections/FleetSection.tsx:191-195
Summary
Loading states and transitions in this project are managed through a hybrid of React state and GSAP timelines. The PageLoader serves as the primary gateway, while custom hooks like useBatchReveal, useDrawPath, and useTextReveal handle granular component transitions. This architecture ensures that every visual change—from the first byte to the final scroll—is intentional, smooth, and synchronized with the user's interaction.