From a13674a5fcc00d1c4cdd5d83a17392672d898b92 Mon Sep 17 00:00:00 2001
From: Michael <git@mdell.org>
Date: Sun, 27 Jun 2021 20:28:07 +0200
Subject: [PATCH] Merge branch 'main' of
 https://github.com/peshrawahmed/nuxt-render-on-scroll into main

---
 README.md                    | 16 +++++++++++++++-
 dev/serve.vue                | 16 ++++++++++++++++
 dist/render-on-scroll.esm.js |  5 ++++-
 dist/render-on-scroll.min.js |  2 +-
 dist/render-on-scroll.ssr.js |  7 +++++--
 src/render-on-scroll.vue     |  3 +++
 6 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 48a019a..f69e2c1 100644
--- a/README.md
+++ b/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
 
diff --git a/dev/serve.vue b/dev/serve.vue
index cfba649..c888137 100644
--- a/dev/serve.vue
+++ b/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;
diff --git a/dist/render-on-scroll.esm.js b/dist/render-on-scroll.esm.js
index b2b4c1b..296a170 100644
--- a/dist/render-on-scroll.esm.js
+++ b/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__ = [];
diff --git a/dist/render-on-scroll.min.js b/dist/render-on-scroll.min.js
index 1d30017..5372433 100644
--- a/dist/render-on-scroll.min.js
+++ b/dist/render-on-scroll.min.js
@@ -1 +1 @@
-var RenderOnScroll=function(e){"use strict";function t(e,t,n,i,r,o,s,d,l,f){"boolean"!=typeof s&&(l=d,d=s,s=!1);const a="function"==typeof n?n.options:n;let u;if(e&&e.render&&(a.render=e.render,a.staticRenderFns=e.staticRenderFns,a._compiled=!0,r&&(a.functional=!0)),i&&(a._scopeId=i),o?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},a._ssrRegister=u):t&&(u=s?function(e){t.call(this,f(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,d(e))}),u)if(a.functional){const e=a.render;a.render=function(t,n){return u.call(n),e(t,n)}}else{const e=a.beforeCreate;a.beforeCreate=e?[].concat(e,u):[u]}return n}var n=t({render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{style:e.styles},[e.render?[e._t("default")]:e._e()],2)},staticRenderFns:[]},undefined,{name:"RenderOnScroll",props:{height:{type:String,default:""},offsetY:{type:Number,default:0}},data:function(){return{render:!1}},computed:{styles:function(){return!this.render&&this.height?"height: "+this.height:""}},mounted:function(){this.isInViewport()?this.render=!0:this.addListner()},beforeDestroy:function(){this.interval&&clearInterval(this.interval)},methods:{isInViewport:function(){if(!this.$el||"undefined"==typeof window)return!1;var e=window.scrollY||window.pageYOffset,t=this.$el.getBoundingClientRect().top+e,n=e,i=e+window.innerHeight,r=t-this.offsetY,o=t+this.$el.offsetHeight-this.offsetY;return r<=i&&r>=n||o>=n&&o<=i},addListner:function(){var e=this;this.interval=setInterval((function(){e.isInViewport()&&(e.render=!0,clearInterval(e.interval),e.interval=null)}),200)}}},undefined,false,undefined,!1,void 0,void 0,void 0),i=function(e){i.installed||(i.installed=!0,e.component("RenderOnScroll",n))},r={install:i},o=null;return"undefined"!=typeof window?o=window.Vue:"undefined"!=typeof global&&(o=global.Vue),o&&o.use(r),n.install=i,e.default=n,Object.defineProperty(e,"__esModule",{value:!0}),e}({});
\ No newline at end of file
+var RenderOnScroll=function(e){"use strict";function t(e,t,n,i,r,o,s,d,l,f){"boolean"!=typeof s&&(l=d,d=s,s=!1);const a="function"==typeof n?n.options:n;let u;if(e&&e.render&&(a.render=e.render,a.staticRenderFns=e.staticRenderFns,a._compiled=!0,r&&(a.functional=!0)),i&&(a._scopeId=i),o?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},a._ssrRegister=u):t&&(u=s?function(e){t.call(this,f(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,d(e))}),u)if(a.functional){const e=a.render;a.render=function(t,n){return u.call(n),e(t,n)}}else{const e=a.beforeCreate;a.beforeCreate=e?[].concat(e,u):[u]}return n}var n=t({render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{style:e.styles},[e.render?e._e():[e._t("placeholder")],e._v(" "),e.render?[e._t("default")]:e._e()],2)},staticRenderFns:[]},undefined,{name:"RenderOnScroll",props:{height:{type:String,default:""},offsetY:{type:Number,default:0}},data:function(){return{render:!1}},computed:{styles:function(){return!this.render&&this.height?"height: "+this.height:""}},mounted:function(){this.isInViewport()?this.render=!0:this.addListner()},beforeDestroy:function(){this.interval&&clearInterval(this.interval)},methods:{isInViewport:function(){if(!this.$el||"undefined"==typeof window)return!1;var e=window.scrollY||window.pageYOffset,t=this.$el.getBoundingClientRect().top+e,n=e,i=e+window.innerHeight,r=t-this.offsetY,o=t+this.$el.offsetHeight-this.offsetY;return r<=i&&r>=n||o>=n&&o<=i},addListner:function(){var e=this;this.interval=setInterval((function(){e.isInViewport()&&(e.render=!0,clearInterval(e.interval),e.interval=null)}),200)}}},undefined,false,undefined,!1,void 0,void 0,void 0),i=function(e){i.installed||(i.installed=!0,e.component("RenderOnScroll",n))},r={install:i},o=null;return"undefined"!=typeof window?o=window.Vue:"undefined"!=typeof global&&(o=global.Vue),o&&o.use(r),n.install=i,e.default=n,Object.defineProperty(e,"__esModule",{value:!0}),e}({});
\ No newline at end of file
diff --git a/dist/render-on-scroll.ssr.js b/dist/render-on-scroll.ssr.js
index b9f5be8..e2c34ae 100644
--- a/dist/render-on-scroll.ssr.js
+++ b/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;
diff --git a/src/render-on-scroll.vue b/src/render-on-scroll.vue
index 680e131..fa791a3 100644
--- a/src/render-on-scroll.vue
+++ b/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>