feat: implement global loading states (#582) and build company about page (#590)#634
Merged
Conversation
- Create About page at /nevo_frontend/app/about/page.tsx with mission, team bios, company values, testimonials, and contact info - Add AboutPageSkeleton component for loading states - Add tests for AboutPage and Skeleton components - Mobile responsive grid layouts using Tailwind sm:/lg: breakpoints - Social media links with accessibility labels for team members
|
@Ugasutun Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #582
Closes #590
📝 Description
This combined PR enhances the overall application UX and brand presentation by implementing comprehensive loading state mechanics across data-fetching components (#582) and deploying the official company About/Information page (#590).
By addressing these together, the new About page natively incorporates the reusable skeleton loader architecture for its data-driven sections (such as team member bios and social media feeds), ensuring a smooth, accessible layout shift-free experience across the entire web application.
🛠️ Key Changes
1. Reusable UI Loading States & UX Safeguards (#582)
Skeleton Architecture: Introduced a set of reusable visual structural placeholders (
<SkeletonLine>,<SkeletonCard>, etc.) designed to match the precise dimensions of incoming content.Pool Page Enhancements: Replaced abrupt blank screen transitions on pool and liquidity views with steady, shimmering content skeletons.
Interactive Button Spinners: Added dynamic inline spinner animations to actionable buttons. When an operation is ongoing, buttons automatically disable interactions to prevent accidental double-submits.
Accessibility (a11y): Embedded
aria-busy="true"andaria-live="polite"attributes across loading containers so screen readers handle pending state changes cleanly.2. New About & Company Information Page (#590)
Route Setup: Created the dedicated
/aboutview containing structured company messaging and assets.Core Sections Implemented:
Mission Statement: A prominent hero section displaying the primary company drive.
Company Values: An interactive grid showcasing organizational core values.
Team Section: A responsive profile gallery featuring individual team member photos, bios, and social links.
Contact & Connect: Centralized social media blocks and direct contact portals alongside a link to recent company news/blog updates.
Seamless Loading Integration: Wired up the newly created skeleton framework to manage profile and content loading smoothly if team data is fetched asynchronously.
📋 Acceptance Criteria Checklist
Loading States (#582)
Criteria | Status | Notes -- | -- | -- Skeleton loaders on pool pages | [ ] | Prevents sudden layout shifts on pool data delivery. Loading spinner on buttons | [ ] | Appears inline; disables parent button interactions. Smooth animations | [ ] | Features a subtle, non-distracting CSS pulse/shimmer. Accessibility integration | [ ] | Explicitly notifies assistive technologies via ARIA attributes.🧪 Verification & Manual Testing Steps
1. Build Verification
Run the compilation suite locally to ensure the build succeeds with no TypeScript compiler errors or module resolutions bugs.
2. Testing Loading Animations (
#582)Navigate to any Liquidity Pool view. Throttle your browser network connection to "Fast 3G" or "Slow 3G" in DevTools.
Confirm that smooth skeleton placeholders fill the exact card layout spaces before the raw data pops in.
Click a form action button and verify it locks down (cannot click twice) and shows a loading spinner.
3. Testing the About View (
#590)Navigate to
/abouton both desktop and mobile layouts.Verify that the grid drops safely into single-column cards on smaller devices and that all text blocks scale cleanly without clipping.