Merge branch 'main' of https://github.com/peshrawahmed/nuxt-render-on…

…-scroll into main

README.md

@@ -51,12 +51,26 @@ export default {
 </render-on-scroll>
 ```
 
+## Placeholder Support
+A placeholder can also be shown before the scroll reaches the element. This will be usefull if you want to show something else while the component is rendering or if you are fetching asynchronous data from.
+```html
+<render-on-scroll>
+  <template #placeholder>
+    <div>
+      This content will be rendered before scroll reaches the main element. 
+    </div>
+  </template>
+  <div>This content will be renderd only when it enters viewport</div>
+</render-on-scroll>
+```
+
+
 ## Configuration Options
 
 | prop    |  type  | default | comments                                                                                                                                                                                                                                                   |
 | ------- | :----: | ------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | height  | String |      '' | CSS string for height property of the wrapping div. Useful to preserve the space while to content is not rendered yet. Can be used in combination with a negative value `offsetY` render only when scrolled into the content area, e.g., for large charts. |
-| offsetY | Number |       0 | Additional amount of pixel to be added on the content's bounds. E.g. value of 100 will render the content when scrolled within 100px _near_ it.                                                                                                            |
+| offsetY | Number |       0 | Additional amount of pixel to be added on the content's bounds. E.g. value of 100 will render the content when scrolled within 100px _near_ it.       
 
 ## Development
 

dev/serve.vue

@@ -20,6 +20,9 @@ export default Vue.extend({
 <template>
   <div id="app">
     <render-on-scroll height="100px" v-for="item in contents" :key="item.text">
+      <template #placeholder>
+        <div class="placeholder">Loading Content ...</div>
+      </template>
       <div class="sampleContent">
         {{ item.text }}
       </div>
@@ -41,6 +44,19 @@ export default Vue.extend({
   font-family: sans-serif;
 }
 
+.placeholder {
+  height: 100px;
+  background: #d6d6d6;
+  text-align: center;
+  line-height: 100px;
+  border-color: black;
+  border-width: 1px;
+  border-style: dotted;
+  border-radius: 5px;
+  margin: 1rem;
+  font-family: sans-serif;
+}
+
 @keyframes fadein {
   0% {
     opacity: 0;

dist/render-on-scroll.esm.js

@@ -6,6 +6,9 @@
 //
 //
 //
+//
+//
+//
 var script = {
   name: 'RenderOnScroll',
   props: {
@@ -171,7 +174,7 @@ var __vue_render__ = function () {
 
   return _c('div', {
     style: _vm.styles
-  }, [_vm.render ? [_vm._t("default")] : _vm._e()], 2);
+  }, [!_vm.render ? [_vm._t("placeholder")] : _vm._e(), _vm._v(" "), _vm.render ? [_vm._t("default")] : _vm._e()], 2);
 };
 
 var __vue_staticRenderFns__ = [];

dist/render-on-scroll.ssr.js

@@ -6,6 +6,9 @@
 //
 //
 //
+//
+//
+//
 var script = {
   name: 'RenderOnScroll',
   props: {
@@ -161,7 +164,7 @@ var __vue_render__ = function __vue_render__() {
 
   return _c('div', {
     style: _vm.styles
-  }, [_vm.render ? [_vm._t("default")] : _vm._e()], 2);
+  }, [!_vm.render ? [_vm._t("placeholder")] : _vm._e(), _vm._ssrNode(" "), _vm.render ? [_vm._t("default")] : _vm._e()], 2);
 };
 
 var __vue_staticRenderFns__ = [];
@@ -173,7 +176,7 @@ var __vue_inject_styles__ = undefined;
 var __vue_scope_id__ = undefined;
 /* module identifier */
 
-var __vue_module_identifier__ = "data-v-be813aa8";
+var __vue_module_identifier__ = "data-v-5b258cce";
 /* functional template */
 
 var __vue_is_functional_template__ = false;

src/render-on-scroll.vue

@@ -1,5 +1,8 @@
 <template>
   <div :style="styles">
+    <template v-if="!render">
+      <slot name="placeholder" />
+    </template>
     <template v-if="render">
       <slot />
     </template>