Creating a performant image skeleton with next/image

106
August 20, 2021, at 3:30 PM

I'm trying to implementing a performant skeleton loader for Next.js's image component.

Current approach:
const MyFancyImage = ({ skeleton = true, ...props }) => {
  const [loading, setLoading] = useState(true);
  if (!skeleton) return <BaseImage {...props} />;
  return loading ? (
    <Skeleton>
      <BaseImage {...props} onLoad={() => setLoading(false)} />
    </Skeleton>
  ) : (
    <BaseImage {...props} />
  );
};

The problem with this is that once the image has loaded and Skeleton is removed, React re-renders the DOM tree downwards, including BaseImage.

In context: how can I remove the Skeleton component without double rendering BaseImage?

This solution does not work, since some next/image positions it's elements absolutely, making it impossible to inherit height.

const StoryblokImage = ({ skeleton = true, ...props }) => {
  const [loading, setLoading] = useState(true);
  if (!skeleton) return <BaseImage {...props} />;
  return (
    <div>
      {loading && <Skeleton />}
      <BaseImage {...props} onLoad={() => setLoading(true)} />
    </div>
  );
};
READ ALSO
Python plotly-dash @app.callback()-function isn&#39;t triggered. What should I do?

Python plotly-dash @app.callback()-function isn't triggered. What should I do?

I am programming a multi-page app with Python dash-plotlyMy app

124
Problem with creating a function that checks for two variables and updates another variable

Problem with creating a function that checks for two variables and updates another variable

My variables in the mysql table are "usersEmail" "usersRefer and "usersPoint"I want to check the whole table if usersEmail = usersRefer on different rows then UPDATE the integer usersPoint on the row of both usersEmail and usersRefer

95