fix: improve copy tooltip perf

Author: RomanHotsiy

package.json

@@ -39,7 +39,6 @@
     "@types/react-dom": "^16.0.0",
     "@types/react-hot-loader": "^3.0.3",
     "@types/react-tabs": "^1.0.2",
-    "@types/react-tooltip": "^3.3.3",
     "@types/webpack": "^3.0.5",
     "@types/webpack-env": "^1.13.0",
     "awesome-typescript-loader": "^3.2.2",
@@ -95,7 +94,7 @@
     "react-dropdown": "^1.3.0",
     "react-hot-loader": "3.1.3",
     "react-tabs": "^2.0.0",
-    "react-tooltip": "^3.4.0",
+    "react-tippy": "^1.2.2",
     "remarkable": "^1.7.1",
     "slugify": "^1.2.1",
     "stickyfill": "^1.1.1",

src/common-elements/CopyButtonWrapper.tsx

@@ -1,5 +1,10 @@
 import * as React from 'react';
-import * as ReactTooltip from 'react-tooltip';
+import { Tooltip } from 'react-tippy';
+import { injectGlobal } from '../styled-components';
+
+import styles from 'react-tippy/dist/tippy.css';
+
+injectGlobal`${styles}`;
 
 import { ClipboardService } from '../services/ClipboardService';
 
@@ -12,7 +17,17 @@ export interface CopyButtonWrapperProps {
   ) => React.ReactNode;
 }
 
-export class CopyButtonWrapper extends React.PureComponent<CopyButtonWrapperProps> {
+export class CopyButtonWrapper extends React.PureComponent<
+  CopyButtonWrapperProps,
+  { tooltipShown: boolean }
+> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      tooltipShown: false,
+    };
+  }
+
   render() {
     return this.props.children({ renderCopyButton: this.renderCopyButton });
   }
@@ -23,33 +38,37 @@ export class CopyButtonWrapper extends React.PureComponent<CopyButtonWrapperProp
         ? this.props.data
         : JSON.stringify(this.props.data, null, 2);
     ClipboardService.copyCustom(content);
+    this.showTooltip();
   };
 
   renderCopyButton = () => {
     return (
-      <>
-        <span
-          onClick={this.copy}
-          data-tip={true}
-          data-for="copy_tooltip"
-          data-event="click"
-          data-event-off="mouseleave"
+      <span onClick={this.copy}>
+        <Tooltip
+          // options
+          title={ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser'}
+          position="top"
+          open={this.state.tooltipShown}
+          arrow="true"
+          duration={150}
+          trigger="manual"
+          theme="light"
         >
           Copy
-        </span>
-        <ReactTooltip
-          isCapture={true}
-          id="copy_tooltip"
-          place="top"
-          getContent={this.getTooltipContent}
-          type="light"
-          effect="solid"
-        />
-      </>
+        </Tooltip>
+      </span>
     );
   };
 
-  getTooltipContent() {
-    return ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser';
+  showTooltip() {
+    this.setState({
+      tooltipShown: true,
+    });
+
+    setTimeout(() => {
+      this.setState({
+        tooltipShown: false,
+      });
+    }, 1500);
   }
 }

src/components/Redoc/elements.tsx

@@ -37,6 +37,7 @@ export const RedocWrap = styled.div`
 export const ApiContent = styled.div`
   z-index: 10;
   position: relative;
+  overflow: hidden;
   width: calc(100% - ${props => props.theme.menu.width});
   ${media.lessThan('small')`
     width: 100%;

src/utils/decorators.ts

@@ -0,0 +1,34 @@
+const throttle = function(func, wait) {
+  var context, args, result;
+  var timeout: any = null;
+  var previous = 0;
+  var later = function() {
+    (previous = new Date().getTime()), (timeout = null);
+    result = func.apply(context, args);
+    if (!timeout) context = args = null;
+  };
+  return function() {
+    var now = new Date().getTime();
+    var remaining = wait - (now - previous);
+    context = this;
+    args = arguments;
+    if (remaining <= 0 || remaining > wait) {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+      previous = now;
+      result = func.apply(context, args);
+      if (!timeout) context = args = null;
+    } else if (!timeout) {
+      timeout = setTimeout(later, remaining);
+    }
+    return result;
+  };
+};
+
+export function Throttle(delay: number) {
+  return (_, _2, desc: PropertyDescriptor) => {
+    desc.value = throttle(desc.value, delay);
+  };
+}

yarn.lock

@@ -134,12 +134,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-tooltip@^3.3.3":
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/@types/react-tooltip/-/react-tooltip-3.3.3.tgz#3b6dbb278fc8317ad04f0ce1972a0972f5450aa7"
-  dependencies:
-    "@types/react" "*"
-
 "@types/react@*", "@types/react@^16.0.30":
   version "16.0.35"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.0.35.tgz#7ce8a83cad9690fd965551fc513217a74fc9e079"
@@ -1168,7 +1162,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.0, classnames@^2.2.3, classnames@^2.2.5:
+classnames@^2.2.0, classnames@^2.2.3:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
 
@@ -5385,6 +5379,10 @@ pn@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
 
+popper.js@^1.11.1:
+  version "1.12.9"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.12.9.tgz#0dfbc2dff96c451bb332edcfcfaaf566d331d5b3"
+
 portfinder@^1.0.9:
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
@@ -5972,12 +5970,11 @@ react-test-renderer@^16.0.0-0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
-react-tooltip@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-3.4.0.tgz#037f38f797c3e6b1b58d2534ccc8c2c76af4f52d"
+react-tippy@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/react-tippy/-/react-tippy-1.2.2.tgz#061467d34d29e7a5a9421822d125c451d6bb5153"
   dependencies:
-    classnames "^2.2.5"
-    prop-types "^15.6.0"
+    popper.js "^1.11.1"
 
 react@^16.2.0:
   version "16.2.0"