chore: use react-intersection-observer in docs to improve perf (#3985)

* added react-intersection-observer module

* moved react-intersection-observer to devDependencies.

* implemented react intersection observer in docs component examples.

* added observer

* remove react-visibility-sensor

* remove closure

Co-authored-by: Oleksandr Fediashov <[email protected]>

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js

@@ -3,7 +3,8 @@ import cx from 'classnames'
 import copyToClipboard from 'copy-to-clipboard'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
-import VisibilitySensor from 'react-visibility-sensor'
+import { InView } from 'react-intersection-observer'
+
 import { Checkbox, Grid, Label } from 'semantic-ui-react'
 
 import { examplePathToHash, scrollToAnchor } from 'docs/src/utils'
@@ -168,11 +169,7 @@ class ComponentExample extends Component {
     } = this.state
 
     return (
-      <VisibilitySensor
-        delayedCall={!wasEverVisible}
-        partialVisibility
-        onChange={this.handleVisibility}
-      >
+      <InView onChange={this.handleVisibility}>
         <div id={anchorName} style={{ marginTop: '1rem' }}>
           <Grid className={cx('docs-example', showCode && 'active')} padded='vertically'>
             <Grid.Row columns='equal'>
@@ -224,7 +221,7 @@ class ComponentExample extends Component {
             {isActiveHash && <CarbonAdNative inverted={showCode} />}
           </Grid>
         </div>
-      </VisibilitySensor>
+      </InView>
     )
   }
 }

package.json

@@ -157,14 +157,14 @@
     "react-docgen": "^4.1.0",
     "react-dom": "^16.9.0",
     "react-hot-loader": "^4.12.11",
+    "react-intersection-observer": "^8.26.2",
     "react-router": "^5.0.0",
     "react-router-dom": "^5.0.0",
     "react-source-render": "^3.0.0-5",
     "react-static": "^5.9.7",
     "react-static-routes": "^1.0.0",
     "react-test-renderer": "^16.9.0",
     "react-universal-component": "^3.0.3",
-    "react-visibility-sensor": "^5.0.2",
     "rimraf": "^2.6.3",
     "satisfied": "^1.1.2",
     "semantic-ui-css": "^2.4.1",

yarn.lock

@@ -10041,6 +10041,13 @@ react-hot-loader@^4, react-hot-loader@^4.12.11:
     shallowequal "^1.1.0"
     source-map "^0.7.3"
 
+react-intersection-observer@^8.26.2:
+  version "8.26.2"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.26.2.tgz#0562ff0c06b2b10e809190c2fa9b6ded656e6e16"
+  integrity sha512-GmSjLNK+oV7kS+BHfrJSaA4wF61ELA33gizKHmN+tk59UT6/aW8kkqvlrFGPwxGoaIzLKS2evfG5fgkw5MIIsg==
+  dependencies:
+    tiny-invariant "^1.1.0"
+
 react-is@^16.6.0, react-is@^16.6.3, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6, react-is@^16.9.0:
   version "16.9.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
@@ -10208,13 +10215,6 @@ react-universal-component@^2.8.1, react-universal-component@^3.0.3:
     hoist-non-react-statics "^2.2.1"
     prop-types "^15.5.10"
 
-react-visibility-sensor@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/react-visibility-sensor/-/react-visibility-sensor-5.0.2.tgz#e360fff81572cb3a2a9fd680484447a9da09a55d"
-  integrity sha512-7+1lr7oQOO2vKr5u/uxoDGFWAAy7lsDy2aJU3Zy1/OymI+TRqOBk8m2L8YE1B0UyfCDWxVAWO+aifVGqNOvqeQ==
-  dependencies:
-    prop-types "^15.6.2"
-
 react@^16, react@^16.9.0:
   version "16.9.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.9.0.tgz#40ba2f9af13bc1a38d75dbf2f4359a5185c4f7aa"
@@ -11850,6 +11850,11 @@ tiny-invariant@^1.0.2:
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.3.tgz#91efaaa0269ccb6271f0296aeedb05fc3e067b7a"
   integrity sha512-ytQx8T4DL8PjlX53yYzcIC0WhIZbpR0p1qcYjw2pHu3w6UtgWwFJQ/02cnhOnBBhlFx/edUIfcagCaQSe3KMWg==
 
+tiny-invariant@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
+  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
+
 tiny-warning@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.2.tgz#1dfae771ee1a04396bdfde27a3adcebc6b648b28"