UPTN Station Cuts FCP to 204ms by Replacing Loading Spinner with Skeleton UI

Improving the Loading Experience: From Spinner to Skeleton

SK Planet's blockchain platform UPTN Station determined that its existing loading spinner was disrupting users' navigation experience, and introduced a Skeleton UI. By showing the page layout and structure in advance, skeletons give users the perception of reaching content faster.

• FCP Performance Improvement: According to measurements taken with PerformanceObserver, First Contentful Paint (FCP), which was 699.6ms with the spinner applied, was dramatically reduced to 204.7ms with the skeleton applied.
• Strategic Conditional Application: Rather than applying skeletons to all pages unconditionally, network latency was analyzed. Pages expected to have short delays retain the spinner or use a fade-in effect to prevent Layout Shift, while skeletons are applied only to pages expected to have long delays.

Implementation Efficiency and State Management Optimization

The component structure and data management approach were improved to enhance development productivity and maintainability.

• Component Reuse: Moving away from writing markup directly, common components such as <Skeleton>, <Row>, and <Column> were combined to reduce per-page skeleton implementation time to 5-10 minutes.
• Leveraging Vue Transition: Vue's <Transition> component and the mode="out-in" attribute were used to implement a natural transition between the loading UI and the completed UI, and to control DOM retention timing.
• Adoption of Tanstack-Query: Tanstack-Query (TQ) was introduced for server state management. Using the useQuery hook and the placeholderData: keepPreviousData option, flickering during data refresh on page navigation was eliminated, and fetching state management logic was simplified for a service with approximately 30,000 users.