What did you do?

My Loader Component

const Loader = props => (
  <ContentLoader
    preserveAspectRatio="none"
    style={{width: '100%' }}
  >
    <rect x="0" y="0" rx="5" ry="5" width="100%" height={300} /> 
  </ContentLoader>
)

What did you expect to happen?

Expect to work for all browsers

What happened actually?

Working fine on Chrome and FireFox but giving black layout for safari.

Which versions of react-content-loader, and which browser are affected by this issue?

"react-content-loader": "^3.1.1" "react": "^15.4.2" Browsers: Safari

Im using ContentLoader inside a LoadingListItem Component. When a flag is changed I unmount this component to ListItem BUT when this happens a WARNING is thrown , this warning is consuming the memory.

Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

Please check the code for the ContentLoader component.

What did you do?

Please include the actual source code causing the issue. import { Facebook } from 'react-content-loader'; // then in render method return <Facebook />;

What did you expect to happen?

Please mention the expected behaviour. See the facebook loader

What happened actually?

Invariant Violation: Text string must be rendered within a component, error located at title in Svg

Which versions of react-content-loader, and which browser are affected by this issue?

Please also mention the version of react. Everything is the latest

This is not a bug, but a question/discussion

I'm not sure if I'm using svg's properly but for having responsive Skeletons, I thought of disabling viewBox. And I did so by passing unexpected values to width/height. Then by skeleton loader was responsive in the way I want (more with in desktop, same height for rectangles)

1- Do you think that's correct approach for this kind of svgs? 2- If you answered yes/maybe, can we add an option to remove view box?

Using react-content-loader with SSR (in this case with Next.js) I'm getting the warning:

Warning: Prop `style` did not match. Server: "fill:url(#yu80c54k1c8)" Client: "fill:url(#zhqtwhb70bm)"

Any workaround?

Thanks!

I'm trying to work on a fork of this library but unfortunately I can't seem to get it to build in way that my RN project likes it. My steps:

cd react-content-loader
npm i
npm run build
cd ../rn-app
npm link ../react-content-loader

It seems like the version that gets pulled from npm is structured in a totally different way than what gets built. I'm seeing folders named "stylized" that I don't get when doing npm run build

What did I do?

I write this code and I expected to run properly this is my code :

const MyLoader = props => (
  <ContentLoader
    height={130}
    width={400}
    speed={2}
    primaryColor="#f3f3f3"
    secondaryColor="#ecebeb"
    {...props}
  >
    <rect x="19" y="45" rx="3" ry="3" width="245" height="5" /> 
    <circle cx="333.5" cy="78.76" r="49.5" /> 
    <rect x="19" y="75" rx="3" ry="3" width="245" height="5" /> 
    <rect x="19" y="105" rx="3" ry="3" width="245" height="5" />
  </ContentLoader>
)

render() {
  return(
      <MyLoader/>
  )
}

And i got this error

Invariant Violation: Invariant Violation: Invariant Violation: Invariant Violation: View config not found fot name rect

I used the last version of this library

Adding gradientDirection prop which translates into a rotate transformation applied to the linearGradient SVG element. Providing the option to animate either from left to right or top to bottom.

fix #255

Summary

This is related to #255. I was browsing for Hactoberfest tagged issues and this one seemed quite interesting. Plus, I love what you've created here, so I'm glad to contribute.

Related Issue #255

Any Breaking Changes

No breaking changes :)

Checklist

• [X] Are all the test cases passing?
• [X] If any new feature has been added, then are the test cases updated/added?
• [X] Has the documentation been updated for the proposed change, if required?

Demo

I flipped the rtl flag on the component - seems that the navigation has changed, but the content stayed the same. Do I need to make my own RTL component? I thought it would switch around automatically. I went to http://danilowoz.com/create-content-loader/ and switching RTL flag also does nothing. Thanks

I checked the source and it doesn't seem possible to set the width and height of the SVG element; it's only possible to set the viewBox width and height. According to this stackoverflow answer (and the testing I've done myself), this is the only way to have an SVG element that has a constant height but stretches in width.

How about adding extra options for elementWidth and elementHeight that will set the width and height attribute directly on the SVG element?

I hope it's alright I didn't fill in the issue template. I felt this was easier to explain with words.

Animation is not working in React Native since react-native-svg 13.0.0

What did you do?

const MyLoader = () => (
  <ContentLoader viewBox="0 0 380 70">
    <Circle cx="30" cy="30" r="30" />
    <Rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
    <Rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
  </ContentLoader>
)

What did you expect to happen?

Loader should animate with backgroundColor and foregroundColor colors.

What happened actually?

No animation.

Which versions of react-content-loader, and which browser are affected by this issue?

react-content-loader 6.2.0 react-native-svg 13.2.0 react-native 0.70.1

react-content-loader 6.0.2 react 18.2.0

receiving this

Warning: SVG: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead

What did you do?

fill color doesn't work

code:

<ContentLoader
            speed={2}
            width={'100%'}
            height={148}
            backgroundColor="#f3f3f3"
            foregroundColor="#ecebeb"
        >
            <Rect
                x="275"
                y="100"
                rx="18"
                ry="18"
                width="120"
                height="36"
                fill="#FFE9EC"
            />
            <Rect
                x="148"
                y="112"
                rx="4"
                ry="4"
                width="80"
                height="24"
                fill="#FFE9EC"
            />
            <Rect
                x="151"
                y="73"
                rx="3"
                ry="3"
                width="182"
                height="15"
                fill="#F5F3F3"
            />
            <Rect
                x="151"
                y="53"
                rx="3"
                ry="3"
                width="182"
                height="15"
                fill="#F5F3F3"
            />
            <Rect
                x="151"
                y="12"
                rx="3"
                ry="3"
                width="244"
                height="17"
                fill="#F5F3F3"
            />
            <Rect
                x="19"
                y="12"
                rx="4"
                ry="4"
                width="124"
                height="124"
                fill="#F5F3F3"
            />
            <Rect
                x="151"
                y="31"
                rx="3"
                ry="3"
                width="244"
                height="17"
                fill="#F5F3F3"
            />
        </ContentLoader>

What did you expect to happen?

wan't fill color work well

What did you do?

When using the editor, the backspace button always deletes the element. Even if you're using the backspace in the form to edit the width, height, etc., the element will still get deleted. This is frustrating as there is also no undo button.

What did you expect to happen?

If you're editing the values in the form outside of the canvas area using backspace should not delete the element.

What happened actually?

The element is deleted when using backspace no matter what you're doing.

Which versions of react-content-loader, and which browser are affected by this issue?

The latest, and Chrome.

If the cursor is outside of the canvas area, like to edit the width or height of the element, using backspace should not also delete the element. Or having an undo button would be highly beneficial.

What did you do?

Please include the actual source code causing the issue.

import React from 'react'
import ContentLoader, { Rect } from 'react-content-loader/native'

const MyLoader = (props) => (
  <ContentLoader
    speed={2}
    width="100%"
    height="100%"
    viewBox="0 0 100 60"
    backgroundColor="#f3f3f3"
    style={{ backgroundColor: 'red' }}
    foregroundColor="#ecebeb"
    // {...props}
  >
    <Rect x="0" y="0" rx="2" ry="2" width="40" height="60" />
    <Rect x="45" y="0" rx="2" ry="2" width="40" height="60" />
  </ContentLoader>
)

export default MyLoader

// use
<View style={{ height: 75, width: '100%' }}>
  <MyCodeLoader />
</View>

What did you expect to happen?

Please mention the expected behaviour.

What happened actually?

Which versions of react-content-loader, and which browser are affected by this issue?

Please also mention the version of react.