Placeholder load different size of image and different place

[aeciolevy]

Hi, Blue I am using SimpleImg, but when I wanna load an image with a specific size, it loads the placeholder in a different place with a different size. This is the wrapper.

import React from 'react';
import PropTypes from 'prop-types';
import { SimpleImg, SimpleImgProvider } from 'react-simple-img';

const LazyLoadingImage = React.memo(function LazyLoadingImage(props){
    const { threshold, img, imgPlaceHolder, duration, height, width } = props;
    return (
        <SimpleImgProvider
            config={{ threshold: [threshold || 0.5] }}
        >
            <SimpleImg
                height={height || 500}
                width={width || 500}
                sizes={
                    `(max-width: ${width || 500}px)
                     (max-height: ${height || 500}px)
                    `
                }
                duration={duration || 2}
                placeholder={imgPlaceHolder}
                src={img}
            />
        </SimpleImgProvider>
    );
});

LazyLoadingImage.propTypes = {
    img: PropTypes.object.isRequired,
    imgPlaceHolder: PropTypes.object.isRequired,
};

export default LazyLoadingImage;

And usage

import React, { lazy, Suspense } from 'react';
import ebook from '../../imgs/e-book.png';
import ebookplaceholder from '../../imgs/e-book-placeholder-8.png';
import DivFlex from '../styled/DivFlex';
import logo2 from '../../imgs/Logo2.png';
import logo2placeholder from '../../imgs/logo2-placeholder-8.png';

const LazyLoadingImage = lazy(() => import(/* webpackChunkName: "LazyLoadingImage" */ 
    '../Shared/LazyLoadingImage'));

const MiddleEbook = () => {
    return (
        <Suspense fallback={<div> Loadding ...</div>}>
            <DivFlex style={{ marginTop: '15rem', border: '1px solid red'}}>
                <LazyLoadingImage img={ebook} imgPlaceHolder={ebookplaceholder} />
                <DivFlex>
                    <LazyLoadingImage img={logo2} imgPlaceHolder={logo2placeholder} 
                        height={196} width={313} 
                    />
                </DivFlex>
            </DivFlex>
        </Suspense>
    );
};

export default MiddleEbook;

[aeciolevy]

The way that I could solve was checking if there is a height, I should override the common style with the height:

commonStyle = {...commonStyle, height: `${height || commonStyle.height}`};

Let me know if can be a fixed and if I should submit a PR. Thanks

[bluebill1049]

Wow nice you are using suspense already ❤️ ! There is a imgClassName prop, but looks like you are using inline style. maybe i can have an inline style prop to overwrite my default common style.

eg.

placeHolderStyle imgStyle

i can probably working on that over the weekend.

[bluebill1049]

actually inline Style is probably not best solution, it's better keep at the classname level, especially due to media query with different breakpoints. can you try out with imgClassName with css?

[aeciolevy]

Bill,

What I did was just add on the common style of the library.

I think is good to merge the style with the inline style user want to override.

The problem is that the placeholder has a different size of the actual image. I guess it has to enforce the same size to have a nice lazy load effect.

Please let me know if would like to split any task, I am helping to contribute.

[bluebill1049]

i will take a look at the issue, see if i can resolve it without add any new props, but feel free to contribute your idea. would be great to make it work perfect.

[bluebill1049]

hey @aeciolevy,

i think i have nailed it on 1.4.5, upgrade and let me know if that works for you.

thanks bill

[aeciolevy]

Hey Bill, It is working... Thanks!!!!