Create a responsive loader content

Question

I develop a movie application using ReactJS, I have a picture slider similar to Netflix, I want to embed loading content before displaying my slider like you tube which displays gray content before the display videos.

I do not know how to adapt my pre-loading content for all device.

In doing some research, I found the react-content-loader library that allows you to create pre-loading content in SVG format.

https://github.com/danilowoz/react-content-loader

I managed to recover the size of the window, but as it is SVG, I do not know how to modify it according to the size of the window, unless I create a preloader of different size for each device.

I would like advice on the logic to adopt to achieve this, should I change the size of my loading content according to the size of the window dynamically or can I create a preloading component for each device ?

Thanks for your help

Answer 1

react-content-loader's maintainer here.

If I got your problem, you would like to create different loaders for specifics windows device sizes and works responsible, right? If so, first you have to turn the SVG fluid, like this:

<Facebook style={{ width: '100%' }} />

The second point is changing the number of lines in the loader depending of the device, so you could do something like this:

const Loader = props => {
  let numberLines;

  switch (props.screen) {
    case "mobile": {
      numberLines = 2;
      break;
    }
    case "desktop": {
      numberLines = 3;
      break;
    }
    case "large-screen": {
      numberLines = 4;
      break;
    }
    default: {
      numberLines = 5;
      break;
    }
  }

  return (
    <ContentLoader
      speed={2}
      primaryColor="#f3f3f3"
      secondaryColor="#ecebeb"
      {...props}
    >
      {props.imageType === "circle" ? (
        <circle cx="60" cy="45" r="30" />
      ) : (
        <rect x="20" y="20" rx="5" ry="5" width="64" height="63" />
      )}

      {new Array(numberLines).fill(" ").map((_, i) => {
        return (
          <rect x="105" y={i * 20 + 20} rx="5" ry="5" width="250" height="12" />
        );
      })}
    </ContentLoader>
  );
};

Link to preview

Let me know if it was exactly you wanted because I need to improve the documentation with these common questions.

Thanks

Answer 2

As I went to few of the articles, I found these few packages suitable for the issue stated :

1) https://www.npmjs.com/package/react-loading-skeleton (12,760 Weekly Downloads),

2) https://www.npmjs.com/package/react-skeleton-loader (2413 Weekly Downloads),

3) https://www.npmjs.com/package/@trainline/react-skeletor (783 Weekly Downloads).

React-skeletor got a article even to help you understand better :

1) https://codeburst.io/achieve-skeleton-loading-with-react-a12404678030.

I am assuming you will go for "react-loading-skeleton" as they have the highest number of downloads but I suggest you to read about "react-skeletor" and if that makes sense for your issue you can give it a try.