Source:  Twitter logo

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

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

4 users liked answer #0dislike answer #04
danilowoz profile pic
danilowoz

SVG's are scaleable (Scaleable Vector Graphics), so you should be able to use the same SVG for all screen sizes.

You have a few options for how to achieve this, there is a great article on it on CSS tricks. Each option has trade off's so it will depend on what you want to achieve and how much control over the SVG you have/want to have.

Below are two examples. Both are wrapped in a container that has a percentage width, so it will scale to fit various screen sizes. You could also set this width with media queries for different screen sizes.

The first method sets the viewbox element of the SVG and no height and width. As described in the article, this means the SVG will scall to fit the parent container, with the aspect ratio of the viewbox preserved.

The second sets the SVG as the src of the image. Then sets the image to be 100% width, so it will scale to fit the width of the container. This gives you less control over the SVG via CSS but is supported by more browsers than the first method.

Try expanding the example below and then resizing the browser to see the SVG's scale.

.svg-container {
  width: 50%;
  border: 1px solid green;

}
img {
 width: 100%;
 }
<p>svg inline</p>
<div class="svg-container">

<svg viewbox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path d="M63.89,9.64C1.58,9.64,0.1,79.5,0.1,93.33c0,13.83,28.56,25.03,63.79,25.03 c35.24,0,63.79-11.21,63.79-25.03C127.68,79.5,126.21,9.64,63.89,9.64z" style="fill:#FCC21B;"/>
  <g>
    <defs>
      <path id="SVGID_1_" d="M63.89,98.06c23.15,0.05,40.56-12.97,41.19-29.05c-27.24,4.91-55.14,4.91-82.38,0 C23.33,85.09,40.74,98.11,63.89,98.06z"/>
    </defs>
    <use style="overflow:visible;fill:#FFFFFF;" xlink:href="#SVGID_1_"/>
    <clipPath id="SVGID_2_">
      <use style="overflow:visible;" xlink:href="#SVGID_1_"/>
    </clipPath>
    <g style="clip-path:url(#SVGID_2_);">
      <path d="M78.05,108c-1.1,0-2-0.9-2-2V61.07c0-1.1,0.9-2,2-2s2,0.9,2,2V106C80.05,107.1,79.16,108,78.05,108 z" style="fill:#2F2F2F;"/>
    </g>
    <g style="clip-path:url(#SVGID_2_);">
      <path d="M92.21,108c-1.1,0-2-0.9-2-2V61.07c0-1.1,0.9-2,2-2s2,0.9,2,2V106C94.21,107.1,93.32,108,92.21,108 z" style="fill:#2F2F2F;"/>
    </g>
    <g style="clip-path:url(#SVGID_2_);">
      <path d="M63.89,108c-1.1,0-2-0.9-2-2V61.07c0-1.1,0.9-2,2-2s2,0.9,2,2V106 C65.89,107.1,64.99,108,63.89,108z" style="fill:#2F2F2F;"/>
      <path d="M49.72,108c-1.1,0-2-0.9-2-2V61.07c0-1.1,0.9-2,2-2s2,0.9,2,2V106 C51.72,107.1,50.83,108,49.72,108z" style="fill:#2F2F2F;"/>
      <path d="M35.56,108c-1.1,0-2-0.9-2-2V61.07c0-1.1,0.9-2,2-2s2,0.9,2,2V106 C37.56,107.1,36.67,108,35.56,108z" style="fill:#2F2F2F;"/>
    </g>
  </g>
  <path d="M64.01,100.56h-0.25c-24.13,0-42.86-13.52-43.56-31.46c-0.03-0.76,0.29-1.49,0.86-1.98 c0.57-0.5,1.33-0.71,2.08-0.57c26.82,4.84,54.67,4.84,81.5,0c0.75-0.14,1.51,0.08,2.08,0.57c0.57,0.5,0.89,1.23,0.86,1.98 C106.87,87.04,88.14,100.56,64.01,100.56z M63.88,95.56h0.13c19.55,0,35.56-10.1,38.2-23.52c-25.29,4.18-51.36,4.18-76.65,0 c2.64,13.42,18.65,23.52,38.2,23.52H63.88z" style="fill:#2F2F2F;"/>
  <path d="M31.96,54.45c-0.78,1.28-2.44,1.7-3.73,0.93c-1.29-0.77-1.71-2.42-0.96-3.71 c0.18-0.31,4.6-7.62,14.37-7.62c9.78,0,14.2,7.31,14.39,7.62c0.76,1.29,0.32,2.97-0.97,3.73c-0.44,0.26-0.91,0.38-1.39,0.38 c-0.92,0-1.83-0.47-2.34-1.32c-0.13-0.22-3.12-4.96-9.69-4.96C35.07,49.49,32.1,54.24,31.96,54.45z" style="fill:#2F2F2F;"/>
  <path d="M100,55.39c-0.43,0.26-0.91,0.38-1.37,0.38c-0.94,0-1.85-0.49-2.36-1.34 c-0.11-0.2-3.08-4.94-9.66-4.94c-6.69,0-9.66,4.89-9.69,4.94c-0.77,1.29-2.43,1.73-3.73,0.96c-1.29-0.76-1.73-2.44-0.96-3.73 c0.18-0.31,4.6-7.62,14.38-7.62c9.77,0,14.18,7.31,14.36,7.62C101.73,52.96,101.29,54.63,100,55.39z" style="fill:#2F2F2F;"/>
</svg></div>
<p>svg as img src</p>
<div class="svg-container">

<img src="https://upload.wikimedia.org/wikipedia/commons/c/cb/Emoji_u1f601.svg"/>
</div>
0 users liked answer #1dislike answer #10
Paddy Hamilton profile pic
Paddy Hamilton

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.

0 users liked answer #2dislike answer #20
Sohan profile pic
Sohan

Yes, it's similar to what I want, I'm using the Loader component in the screen, and I do not want to use the component. List of react-content-loader.

I'm just going to change the number of items to display depending on the size, in the example there are 6 on large screen

0 users liked answer #3dislike answer #30
FoxaLiveJS profile pic
FoxaLiveJS

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).