feat: Add animated intro splash screen and fix theme hydration mismatch#1024
feat: Add animated intro splash screen and fix theme hydration mismatch#1024Abhishek2005-ard wants to merge 1 commit into
Conversation
|
@Abhishek2005-ard is attempting to deploy a commit to the magic-peach1's projects Team on Vercel. A member of the Team first needs to authorize it. |
✅ PR Format Check Passed — @Abhishek2005-ardBasic format checks passed. A maintainer will review your code changes. This does not mean the PR is approved — it just means the format is correct. |
👋 Thanks for your PR, @Abhishek2005-ard!Welcome to Reframe — a browser-based video editor built for everyone 🎬 What happens next
Quick checklist
Useful links
Happy coding! 🎉 |
|
Hi maintainers, could you please approve the workflows/checks for this PR? The build appears to be waiting for approval. Thank you! |
|
@Abhishek2005-ard Thanks for the splash screen contribution! However, this PR is a duplicate of #1030 which implements the same feature with better quality (localStorage first-visit check, prefers-reduced-motion support, aria-hidden accessibility). Closing this in favor of #1030. You're welcome to contribute other features! |
Description
This PR introduces a new animated splash screen that appears on initial application load, creating a smoother and more polished user experience before the main dashboard is revealed. Additionally, it resolves a Next.js hydration mismatch warning related to the theme toggle component.
Changes Made
Added
SplashScreenComponent: Created a full-screen, theme-aware splash overlay (src/components/SplashScreen.tsx) that features a pulsing Reframe brand logo and text.Root Layout Integration: Injected the splash screen into
src/app/layout.tsxso it mounts immediately on initial page load.Smooth Transitions: Implemented timeout logic so the splash screen displays for 1.8 seconds before triggering a smooth 500ms fade-out and unmounting entirely.
Fixed Hydration Mismatch**: Updated
src/components/ThemeToggle.tsxto wait for client hydration before rendering the light/dark mode icon. This resolves theInvalid HTML tag nesting / typeof window !== 'undefined'error caused by the server and client rendering different SVG icons on the initial load.Visual Changes
Users will now see a brief, animated "Reframe" logo overlay when they first visit the app, which gracefully fades out into the video editor dashboard.
Type of Change
New feature (non-breaking change which adds functionality)
Bug fix (non-breaking change which fixes an issue)
ScreenShort:-

close #1017