fix(Lazy-loading dfp ads): Implement lazy-loading for dfp ads (#85)

* Pass index to eagerload collection images

* chore(release): 1.57.5-uday-perf.0

* Eargerload only first collection instead of first two

* chore(release): 1.57.5-uday-perf.1

* Pass predicate to EagerLoadImages

* chore(release): 1.57.5-uday-perf.2

* Lazy-load ads

Enable single request

* chore(release): 1.57.5-uday-perf.3

* Set singleLoad to false

* chore(release): 1.57.5-uday-perf.4

* Remove lazyLoading and enable singleLoad

* chore(release): 1.57.5-uday-perf.5

* Enable lazy-loading and disable single-request

* chore(release): 1.57.5-uday-perf.6

* Remove eager loading collection wrapper

* Update package-lock

* chore(release): 1.57.5-uday-perf.7

* chore(release): 1.57.5-uday-perf.8

* Pass lazyLoad and singleRequest as props

* Update Readme

* chore(release): 1.57.5-uday-perf.9

* chore(release): 1.57.5-uday-perf.10

Author: iamgarima

README.md

@@ -111,7 +111,7 @@ import { ClientSideOnly } from '@quintype/components';
 ```
 
 ### DfpAds
-This is a higher order component which can be used to manage ad units in a single place. A component must be created, and used with the `adtype` parameter
+This is a higher order component which can be used to manage ad units in a single place. A component must be created, and used with the `adtype` parameter. These ads are lazy-loaded and single-request mode is disabled by default which can be overwritten as follows.
 
 ```javascript
 import { createDfpAdComponent } from '@quintype/components';
@@ -130,7 +130,10 @@ export const DfpAd = createDfpAdComponent({
     // if(storyIsSponsored) params['sponsor'] = storySponsor
 
     return params;
-  }
+  },
+  // Only if you want to overwrite the existing values
+  lazyLoad: false,
+  singleRequest: true
 });
 
 <DfpAd adtype="homepage-2" />

src/components/dfp-ad.js

@@ -3,21 +3,25 @@ import {AdSlot, DFPSlotsProvider} from 'react-dfp';
 import {connect} from 'react-redux';
 import {withError} from './with-error';
 
-function DfpAdBase({defaultNetworkID, config, collapseEmptyDivs, targetingArguments, adtype}) {
+function DfpAdBase({defaultNetworkID, config, collapseEmptyDivs, targetingArguments, adtype, lazyLoad, singleRequest}) {
   const adConfig = config[adtype];
   return <DFPSlotsProvider dfpNetworkId={defaultNetworkID}
                            collapseEmptyDivs={collapseEmptyDivs}
                            targetingArguments={targetingArguments}
-                           sizeMapping={adConfig.viewPortSizeMapping}>
+                           sizeMapping={adConfig.viewPortSizeMapping}
+                           lazyLoad={lazyLoad}
+                           singleRequest={singleRequest}>
     <AdSlot {...adConfig} />
   </DFPSlotsProvider>;
 }
 
-export function createDfpAdComponent({defaultNetworkID, config, targeting, collapseEmptyDivs = true}) {
+export function createDfpAdComponent({defaultNetworkID, config, targeting, collapseEmptyDivs = true, lazyLoad = true, singleRequest = false}) {
   return connect((state) => ({
     targetingArguments: targeting(state),
     defaultNetworkID: defaultNetworkID,
     config: config,
-    collapseEmptyDivs: collapseEmptyDivs
+    collapseEmptyDivs: collapseEmptyDivs,
+    lazyLoad: lazyLoad,
+    singleRequest: singleRequest
   }), () => ({}))(withError(DfpAdBase));
 }