First of all, you've done an excellent job on react-content-loader and create-content-loader! Truely impressed.

There's a couple things I'd love introduced in create-content-loader, but I'll make separate tickets for each.

For this one, I found myself hitting the delete key on my keyboard hoping that the currently-selected svg element would be deleted - sadly not :(

This is lower priority for me, but when creating multiple elements side-by-side and of the same heights, I could have used guidelines to make sure they aligned nicely. But for the time-being I could use a Guidelines chrome extension to achieve the same thing.

This is a FEATURE request

It would be really nice to be able to edit a loader previously created using the DIY, that at this moment only allows you to create a new one.

Thanks for the amazing work,
Saludos
Luis

Hello.
Look at this

:

I reload the page => It's okay
I clear height input => it's okay
but
I clear width input => settings bye bye

Problem:
Lost the last draw on the canvas.

Solution:
An option to recover the last draw.

Implementation:
Every time the canvas is updated, save the code on localstorage. Then when the user opens the page again, show a button See your last draft above the canvas which it will update the canvas with data from localstorage and it will hidden the button itself

Here I m trying to create a custom content loader but there is width and height is in px is there any reason for that or how should I manipulate that so I can pass my height and width as per my requirement, more specifically in Percentage?

I've been trying other shapes like of svg, but that doesn't work as expected.
Is there any way to create loaders like the image attached? (which won't be possible using simple )

I can't edit the code with the new version.
is this on purpose or a bug ?
thanks

Holding the shift key whilst scaling an svg element should keep the same proportions.

1. Select an item in the editor
2. Press backspace to delete it

👉 The browser navigates to the previous page

macOS 10.15.7
Firefox 84.0.2

检测到 danilowoz/create-content-loader 一共引入了1382个开源组件，存在23个漏洞

漏洞标题：requests 代码注入漏洞
缺陷组件：[email protected]
漏洞编号：CVE-2020-28502
漏洞描述：Dan DeFelippi node-XMLHttpRequest是  （Dan DeFelippi）开源的一个应用软件。用于模拟浏览器XMLHttpRequest对象。
node-XMLHttpRequest before 1.7.0 存在代码注入漏洞，攻击者可利用该漏洞导致任意代码注入并运行。
影响范围：(∞, 1.6.2)
最小修复版本：1.6.2
缺陷组件引入路径：[email protected]>[email protected]>[email protected]>[email protected]>[email protected]

另外还有23个漏洞，详细报告：https://mofeisec.com/jr?p=icff4e

Hi, I'm using your tool here:
https://skeletonreact.com/

But when trying to rotate an element (with the handle) the rotation shows up in the code-view, but as soon as I let go, the rotation is removed, and the element then gets moved to a different location, seemingly based on that rotation.
I've tested on both Firefox and Chrome.

Build a simple button Copy to the clipboard above screen code, which it will copy from Set up the project... to all component in SVG

I got this error while building the repo

Failed to compile.

./src/Gallery/insertYourLoaderHere/index.js
Module not found: Can't resolve './Youtube' in 'pathToProject/create-content-loader/src/Gallery/insertYourLoaderHere'

I guess in index.js we should remove the third line. I mean this line export { default as Youtube } from './Youtube'
If that's it I'm gonna PR for it

Issue

When editing on a wide canvas, the live code editor's width is reduced to accommodate the wider canvas. This can cause the canvas to be "jumpy" when positioning items as the editor will auto expand / condense to fit the length of the numbers needed for the svg elements.

This can make editing hard, as the canvas where elements need to be positioned is constantly changing position when dragging.

Example

Gif Example

Solution

This could be solved by either

1. Allow the code editor to be "collapsed" and "expanded" so that the canvas becomes full width. This has the added advantage of making the design process a bit easier for more visual people.
2. set a fixed width on the code editor to keep it from automatically expanding.

Let me know what you think, and I'm happy to submit a PR!

It would be nice if the viewbox's color were different from the app-canvas background (currently #fff).

Here is a (horrible) example that I made using the browser's inspector:

As you can see, the viewBox bounds are visible, making it easier to create a loader.

And here is a screenshot of the current app-canvas background where the viewBox is not visible:

What do you think?

On npm install && npm run dev the development server is giving an error

@danilowoz

im trying to find dark mode example on google but it doesn't understand my search query.

would love to see the colors used in dark mode if anyone has seen such in the wild?

I've ported the react-content-loader into qwik named qwik-content-loader.

You can add the Qwik in the output section in your website.

Here is the ported version:
https://github.com/iamriajul/qwik-content-loader
https://www.npmjs.com/package/qwik-content-loader

Thanks.

When the button reset color is clicked the colors in React Component in the editor is updated, but the input color not

Hi folks. Love using this tool, but I couldn’t figure out a way to flexbox the elements within ContentLoader.

Let’s say you’re building a skeleton for an instant message. You’d have a static-sized avatar (circle), and you’d want the lines representing the message to fill up the remaining horizontal space and alternate between 100% and 80% like shown here:

It’s very easy to do with flexbox but I couldn’t figure out the right way to build it using this library for React Native. I’d appreciate any help and examples 👍

As an enhancement, it would be helpful if we could set a background image on the canvas. I found that it was much easier for me to get the svg elements exactly right by taking a screenshot of my real item, uploading it somewhere like Imgur, and then setting the canvas container's background-image in the dev console.

It let me see where everything should go, exactly (once I had set the correct canvas dimensions). Much easier than trial and error or measuring every dimension from the real item.

When I wanted to create duplicates of the same svg element, I found myself wanting to copy paste some of the svg elements in the generated code snippets/preview section, hoping that it would then be reflected in the preview/tool on the right.

I want to make the wrapped elements into divs so I can control them over a responsive CSS grid (With styled-component) for differents screens, but the animation is separate.

I made each component adjusted to the container div and already on a parent (Grid) I control the distribution on the screen.

What I can't unify the animation of each element as one when assembling them.

Any ideas to do it?

Example component.

CircleSkeleton

export const CircleSkeleton = (props) => {
  return (
    <div>
      <ContentLoader
        speed={2}
        width="100%"
        height="100%"
        viewBox="0 0 200 200"
        backgroundColor="#D9D9D9"
        foregroundColor="#F9F9F9"
        {...props}>
        <circle x="0" cx="50%" cy="50%" r="50%" />
      </ContentLoader>
    </div>
  )
}

BarSkeleton

export const BarSkeleton = (props) => {
  return (
    <div>
      <ContentLoader
        speed={2}
        width="100%"
        height="100%"
        backgroundColor="#D9D9D9"
        foregroundColor="#F9F9F9"
        {...props}>
        <rect x="0" y="25%" rx="8" ry="8" width="100%" height="50%" preserveAspectRatio="none" />
      </ContentLoader>
    </div>
  )
}

Combiner like BarElementSkeleton

const BarElementSkeleton = () => (
  <GlobalGrid>
    <div className="bar__unit-skeleton">
      <CircleSkeleton /> // Animate separate
      <BarSkeleton /> // Animate separate
    </div>
    <hr />
  </GlogalGrid>
)

Remember: The idea es unify the Animate separate. This method is for use grid responsive in my all (GlobalGrid)

If there is a component (say a Material-UI card), there is currently no way to overlay the content loader on top of the component so that the content loader is the same size/dimensions as the underlying content.

This results in having a content loader that is not the same size as what replaces it once loading is complete.

Share your loader with the community.

That's is a way to share your custom loader with the React community. Besides you can help the other developers to create amazing loaders to their interfaces. There are so many ways to build a content loader, show off here!

How to insert a loader?

1. Build your custom amazing loader;
2. Create a file with a custom name, here;
3. Use the following boilerplate (don't forget to fill the metadata);
4. Insert the file in the gallery, here;
5. Open a PR;

Boilerplate

import React from "react"
import ContentLoader from "react-content-loader"

const __NAME_OF_LOADER__ = props => {
  return (
    <ContentLoader
      height={40}
      width={1060}
      speed={2}
      primaryColor="#d9d9d9"
      secondaryColor="#ecebeb"
      {...props}
    >
    // your loader
    </ContentLoader>
  )
}

__NAME_OF_LOADER__.metadata = {
  name: __WRITEHERE__, // My name
  github: __WRITEHERE__, // Github username
  description: __WRITEHERE__, // Little tagline
  filename: __WRITEHERE__ // filename of your loader
}

export default __NAME_OF_LOADER__

I found myself wanting to copy an svg element to make sure I get the same dimensions.

This ideally could be done one or more of a few ways:

1. Copy/Paste functionality (clipboard)
2. A clone button, like is done for Delete button/action. Perhaps it could sit beside the delete button?
3. Holding the alt key key whilst dragging an svg element

Problem:
Made mistakes drawing on canvas.

Solution:
Undo button

Implementation
On react-sketch (FabricJS) there is the option to undo the draw, but the code still needs to update together with the canvas.

See documentation here