Ways to display spinner animations during image loading on Next.js?

Question

Ways to display spinner animations during image loading on Next.js?

Currently, I am attempting to implement a spinner display while images are loading on a Next.js website. To achieve this, I am utilizing the NextUI UI library.

My website features several cards, and my goal is to showcase a spinner during the image loading process. In my attempts, I have experimented with a React hook and ternary operator:

import Loader from '../components/Loader'
import spinner from '../public/images/spinner.svg'

const Item = ({ item }) => {

  const [isLoading, setIsLoading] = useState(false);
 
  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      const result = await {item};   
      setIsLoading(false);
    };
    fetchData();
  }, []);
  
  return (
    <Link href={`/item/${item.id}`}>
      <Card flat isHoverable isPressable css={{ mw: "400px", alignContent: 'center'}}>
        {isLoading ? (
          <Loader />
        ) : (
         <Card.Image src={item.pic} alt={item.id} layout='responsive' css={{ alignContent: 'center'}} placeholder='blur' blurDataURL='/../public/images/spinner.svg'/>
        )}

("Loader" has been correctly renamed from the UI library)

I've also experimented with using the blurDataUrl property provided by Next.js, but it doesn't seem to function as expected.

javascript reactjs react-hooks next.js nextui

Answer 1

Answer №1

I found success with this approach: displaying a circular loader while the image is loading.

import {useState, useEffect} from 'react';
import Image from "next/image";
import { CircularProgress } from "@mui/material";
import { styled } from "@mui/system";

export default function ServiceImage(props: any) {  
  const { src, alt } = props.props;
  const [isImageLoaded, setIsImageLoaded] = useState(false);
  useEffect(()=> {
    setIsImageLoaded(false);
  }, [src, alt]);

  const StyledImage = styled(Image)(({ theme }) => ({
    objectFit: "cover",    
    objectPosition: "50% 50%",
    [theme.breakpoints.up("md")]: {
      objectFit: "contain",
    }
  }));

  return (
    <>
    <StyledImage src={src} alt={alt} fill onLoadingComplete={() => {
      setIsImageLoaded(true);
    }}
    sx={{
      opacity: isImageLoaded ? 1 : 0,
      transitionDuration: "500ms",
      transitionProperty: "opacity",
      transitionTimingFunction: "ease-out",
    }}
    />
    <CircularProgress size={80} thickness={3} sx={{ 
      position: "absolute", 
      top:"50%", 
      left: "50%", 
      transform: "translate(-50%, -50%) !important",
      opacity: !isImageLoaded ? 1 : 0,
      transitionDuration: "500ms",
      transitionProperty: "opacity",
      transitionTimingFunction: "ease-out",
  }} />
    </>
  );
}

Answer 2

I found success with this approach: displaying a circular loader while the image is loading.

import {useState, useEffect} from 'react';
import Image from "next/image";
import { CircularProgress } from "@mui/material";
import { styled } from "@mui/system";

export default function ServiceImage(props: any) {  
  const { src, alt } = props.props;
  const [isImageLoaded, setIsImageLoaded] = useState(false);
  useEffect(()=> {
    setIsImageLoaded(false);
  }, [src, alt]);

  const StyledImage = styled(Image)(({ theme }) => ({
    objectFit: "cover",    
    objectPosition: "50% 50%",
    [theme.breakpoints.up("md")]: {
      objectFit: "contain",
    }
  }));

  return (
    <>
    <StyledImage src={src} alt={alt} fill onLoadingComplete={() => {
      setIsImageLoaded(true);
    }}
    sx={{
      opacity: isImageLoaded ? 1 : 0,
      transitionDuration: "500ms",
      transitionProperty: "opacity",
      transitionTimingFunction: "ease-out",
    }}
    />
    <CircularProgress size={80} thickness={3} sx={{ 
      position: "absolute", 
      top:"50%", 
      left: "50%", 
      transform: "translate(-50%, -50%) !important",
      opacity: !isImageLoaded ? 1 : 0,
      transitionDuration: "500ms",
      transitionProperty: "opacity",
      transitionTimingFunction: "ease-out",
  }} />
    </>
  );
}

Ways to display spinner animations during image loading on Next.js?

Answer №1

Similar questions

Using Next.js: What is the process for dynamically registering the quill-blot-formatter to react-quill that has been imported on the client side rendering exclusively

Exploring React JS Subdomains

Having difficulty showing an image in the navigation provided via useContext()

Using HTML, CSS, and JavaScript, the main tab must include nested subtabs to enhance navigation and

The click event will not be triggered if the element is removed by my blur event

How can you modify the starting point of data in jQuery flot?

React Error: Unable to iterate over this.state.descriptions

Encountering an issue where rendering a component named Exercise within the ExerciseList component is not allowed

The Next.js dynamic route in production is displaying a 403 error instead of the expected 404. What might be causing this issue?

Using getJSON to return key/value pair from local host URL in JSFiddle - A step-by-step guide

Incorporating a classList.toggle into a snippet of code

Find the JavaScript code that selects the previous value chosen

What is the most efficient way to transfer form data from one JSP page to another?

Choose a particular optgroup simultaneously using custom JavaScript

Error handling: Encountered unexpected issues while parsing templates in Angular 2

Creating a custom 'Currently Listening To' embed for a Discord Music Bot

Tried to enroll the RCTBridgeModule category as RCTFileReaderModule

Upon clicking a table row, generate a div underneath containing mapped data

Tips for sending multiple JSON objects using the ajax() method

Exploring the interaction between React Hooks and the lifecycle methods in React