lucasleandro1204 / vue-content-loading

Vue component to easily build (or use presets) SVG loading cards Facebook like.

Vue Content Loading

Vue component to easily build or use presets for Facebook-like SVG loading cards.

Inspired in React Content Loader

So how does it look like?

Facebook

Code

Documentation & Examples

Documentation with all presets is available HERE

Installation

Simple installation via NPM

$ npm install vue-content-loading --save

License

This project is licensed under the MIT license. See the LICENSE file for more details

vue-content-loading's Issues

VclBulletList Duplicate keys detected: '1'. This may cause an update error.

import { VclFacebook,VclList,VclBulletList } from 'vue-content-loading';

"vue-content-loading": "^1.5.0",

use: VclBulletList

[Vue warn]: Duplicate keys detected: '1'. This may cause an update error.

how can i make the loader responsive?

nuxt warning

hi,
i have this warning using the plugin with nuxt:
You are using the runtime-only build of Vue where the template compiler is not available

the nuxt developer said thats a package error
you may delivery non built package

Using a % for width

Using a % for width throws this warning, but works fine, might want to allow the string with % in the prop validation.

[Vue warn]: Invalid prop: type check failed for prop "width". Expected Number with value NaN, got String with value "100%".

More presets

We need more presets, I can think in different types of lists, blog post placeholder and maybe a custom shape?

Implement Table Presets

Hi. Really nice piece of code!

I want to suggest the adiction of one "Preset" for Tables-like loading, with custom options to choose the line and columns number.

Thanks.

Skeleton screen loading management

I was also writing a Skeleton screen and encountered a problem.
After reading your code, my confusion is even greater. The skeleton screen needs a loading boolean value to determine whether to render. There will be many pages in a project, and a loading boolean needs to be bound to each page. This is a repeated declaration of loading. boolean.
There is another situation: there will be many AJax requests on a page, and each request will be a separate module on the page, and a separate module is a skeletal screen, which will cause more repeated work of declaring laoding boolean Therefore, all AJax requests for the page are placed in Promise.all. After all requests are successful, the page is displayed normally, otherwise the skeleton screen is displayed.
This is my doubt now, I don't want to repeatedly declare the loading boolean, so I don't know if you have a better solution

How to make not responsive

How to make not responsive when container get bigger?

Broken module with vue3 beta

Hello i'm using this module with a vue3 instance and doesn't work... feel free to ask me anything to fix this.

Bug only on safari

Hi, can you help me with this? If I reload the page the loading come from this:

to this:

** This happening only on safari and only if I refresh the page (cmd + r "F5"), no errors or warnings on console.

Implement test

Are you thinking to implement tests on your application? I've never implemented tests on Vue, but I would like to help you if this issue is your roadmap :)

Good job!

RTL Version

Please add RTL version

Vue.js 3 support

When are you planning to add support for Vue.js 3?

Linting

Add linting following this other package vue-snippets

You can copy everything, but write some guide in readme please xd

Don't forget to add the scripts.

Next version

I'll be working on the next version in the next weeks
Feel free to share your ideas and thoughts =)

Docs

• Change docs generator (vuepress)?
• Review documentation and rewrite stuff
• Add better examples
• Loader editor (low priority)

Library

• Drop default export
• Update them to not use SVG as default

We should be able to import and use svg inside the loaders, but due to compatibility issues (#17) they won't be built with svg.

• Rewrite components

They should be functional

• New way to build loaders

Maybe an wrapper component that overlays elements

• Add an way to control group of loaders easily
• Add new components
• Add tests

Doesn't work with flex-direction: row

I'm using Laravel mix with vue-content-loading": "^1.6.0 installed

<style scoped>
.flex-row {
  display: flex;
  flex-direction: row;
}
</style>

<template>
  <div class="flex-row">
    <vue-content-loading :width="300" :height="100">
      <circle cx="30" cy="30" r="30" />
      <rect x="75" y="13" rx="4" ry="4" width="100" height="15" />
      <rect x="75" y="37" rx="4" ry="4" width="50" height="10" />
    </vue-content-loading>
  </div>
</template>

<script>
  import VueContentLoading from 'vue-content-loading';
  export default {
    components: {
      VueContentLoading,
    }
  }
</script>

Nothing is rendered if I put vue-content-loading inside flex-direction: row styled parent element. It works with flex-direction: column

Any solutions?

Update vue dependency to 2.6.11

Hi, can you please update vue dependency to latest version at the moment, because there is vulnerability fix: Vue.js v2.6.11