React Skeleton

React Skeleton, often referred to as "skeleton screens" or "content placeholders," is a technique used in user interface design to improve the perceived performance and user experience of web applications, particularly during data loading. Instead of displaying a blank screen or a simple spinner while content is being fetched, a skeleton screen shows a simplified, wireframe version of the page's layout and components. These placeholders typically consist of gray or shimmery shapes that mimic the structure of the upcoming content (e.g., text lines, image boxes, button shapes).

Why use React Skeleton?
1. Improved Perceived Performance: Users perceive the application as faster because something is happening on the screen immediately, giving the impression that the content is on its way, rather than waiting for a complete render.
2. Better User Experience (UX): It reduces user frustration associated with blank screens or indefinite loading indicators. By providing a visual context of what's coming, users can mentally prepare for the content.
3. Reduced Cognitive Load: Skeleton screens give users a clear indication of where specific types of content will appear, allowing them to anticipate and process information more easily once it loads.
4. Visual Consistency: They maintain the overall layout structure of the application even when data is absent, contributing to a more consistent and polished look and feel.

How does it work?
When an application is in a loading state, instead of rendering the actual data, React components conditionally render a set of "skeleton" components. These skeleton components are essentially CSS-styled `div`s or other elements that visually represent the size and shape of the data they will eventually replace. Many libraries provide pre-built skeleton components (e.g., `react-loading-skeleton`). These often include subtle animations (like a shimmer effect) to make them appear more dynamic and indicate ongoing activity. Once the data fetching is complete, the `isLoading` state changes, and the actual data-driven components are rendered in place of the skeletons.

Implementation Techniques:
1. Custom CSS/HTML: Manually creating `div`s and styling them to look like placeholders. This offers maximum control but can be more time-consuming.
2. Libraries: Using existing React libraries like `react-loading-skeleton`, `react-content-loader`, or `shimmer-placeholder` greatly simplifies the process. These libraries often provide components that can be customized for height, width, color, and animation.

Best Practices:
* Mimic Content Structure: The skeleton screen should closely resemble the final layout of the content to provide accurate visual cues.
* Keep it Simple: Avoid overly complex or detailed skeletons. The goal is a placeholder, not a fully styled empty state.
* Subtle Animation: A subtle shimmer or pulse animation helps indicate that loading is in progress without being distracting.
* Conditional Rendering: Implement logic to switch between the skeleton screen and the actual content based on the loading state.

import React, { useState, useEffect } from 'react';
import Skeleton from 'react-loading-skeleton';
import 'react-loading-skeleton/dist/skeleton.css';

// A simple component to simulate fetching user data
function UserProfileCard() {
  const [userData, setUserData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUserData = async () => {
      setLoading(true);
      // Simulate network request
      await new Promise(resolve => setTimeout(resolve, 2000));
      setUserData({
        name: 'John Doe',
        email: 'john.doe@example.com',
        bio: 'Frontend developer with a passion for building user-friendly interfaces using React.',
        avatar: 'https://via.placeholder.com/150'
      });
      setLoading(false);
    };

    fetchUserData();
  }, []);

  return (
    <div style={{
      border: '1px solid #ddd',
      borderRadius: '8px',
      padding: '20px',
      maxWidth: '400px',
      margin: '40px auto',
      boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
    }}>
      {loading ? (
        // Skeleton Loader
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Skeleton circle={true} height={80} width={80} style={{ marginRight: '20px' }} />
          <div>
            <Skeleton count={1} width={200} height={25} style={{ marginBottom: '10px' }} />
            <Skeleton count={1} width={250} height={18} />
            <Skeleton count={1} width={300} height={15} style={{ marginTop: '15px' }} />
            <Skeleton count={1} width={280} height={15} />
          </div>
        </div>
      ) : (
        // Actual Content
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <img
            src={userData.avatar}
            alt="User Avatar"
            style={{ borderRadius: '50%', height: '80px', width: '80px', marginRight: '20px' }}
          />
          <div>
            <h2 style={{ margin: '0 0 10px 0', color: '#333' }}>{userData.name}</h2>
            <p style={{ margin: '0 0 5px 0', color: '#555', fontSize: '16px' }}>{userData.email}</p>
            <p style={{ margin: '15px 0 0 0', color: '#666', fontSize: '14px', lineHeight: '1.5' }}>{userData.bio}</p>
          </div>
        </div>
      )}
    </div>
  );
}

// To render this in a React app, you would typically have an App component:
// function App() {
//   return (
//     <div className="App">
//       <UserProfileCard />
//     </div>
//   );
// }
//
// export default App;