feat: support customize placeholder class

README.md

@@ -67,18 +67,18 @@ eg, show a loading indicator.
 </script>
 ```
 
-By default the placeholder will be wrapped in a `div` tag, however you can use `placeholderTag` prop to customize it:
+By default the placeholder will be wrapped in a `div` tag with `client-only-placeholder` class, however you can use `placeholderTag` and `placeholderClass` prop to customize it:
 
 ```vue
-<client-only placeholder="loading" placeholder-tag="span">
+<client-only placeholder="loading" placeholder-tag="span" placeholder-class="my-placeholder-class">
   <comments />
 </client-only>
 ```
 
 And you get:
 
 ```html
-<span class="client-only-placeholder">
+<span class="my-placeholder-class">
   loading
 </span>
 ```

src/index.js

@@ -6,6 +6,10 @@ export default {
     placeholderTag: {
       type: String,
       default: 'div'
+    },
+    placeholderClass: {
+      type: String,
+      default: 'client-only-placeholder'
     }
   },
   render(h, { parent, slots, props }) {
@@ -23,7 +27,7 @@ export default {
       return h(
         props.placeholderTag,
         {
-          class: ['client-only-placeholder']
+          class: [props.placeholderClass]
         },
         props.placeholder || placeholderSlot
       )