fix: scroll lag on doc reference and wiki pages by using react-scroll `spy` and only updating the sidebar menu items whose active state had changed

1 files changed, 15 insertions, 1 deletions

diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx
index 5a456109b..089e6e2ba 100644
--- a/packages/react-shared/src/components/link.tsx
+++ b/packages/react-shared/src/components/link.tsx
@@ -7,7 +7,7 @@ import * as validUrl from 'valid-url';
 import { LinkType } from '../types';
 import { constants } from '../utils/constants';
 
-interface LinkProps {
+interface BaseLinkProps {
     to: string;
     shouldOpenInNewTab?: boolean;
     className?: string;
@@ -18,6 +18,12 @@ interface LinkProps {
     fontColor?: string;
 }
 
+interface ScrollLinkProps extends BaseLinkProps {
+    onActivityChanged?: (isActive: boolean) => void;
+}
+
+type LinkProps = BaseLinkProps & ScrollLinkProps;
+
 export interface LinkState {}
 
 /**
@@ -103,11 +109,14 @@ export class Link extends React.Component<LinkProps, LinkState> {
                         <ScrollLink
                             to={this.props.to}
                             offset={0}
+                            spy={true}
                             hashSpy={true}
                             duration={constants.DOCS_SCROLL_DURATION_MS}
                             containerId={constants.SCROLL_CONTAINER_ID}
                             className={this.props.className}
                             style={styleWithDefault}
+                            onSetActive={this._onActivityChanged.bind(this, true)}
+                            onSetInactive={this._onActivityChanged.bind(this, false)}
                         >
                             <span onClick={this._onClickPropagateClickEventAroundScrollLink.bind(this)}>
                                 {this.props.children}
@@ -119,6 +128,11 @@ export class Link extends React.Component<LinkProps, LinkState> {
                 throw new Error(`Unrecognized LinkType: ${type}`);
         }
     }
+    private _onActivityChanged(isActive: boolean): void {
+        if (this.props.onActivityChanged) {
+            this.props.onActivityChanged(isActive);
+        }
+    }
     // HACK(fabio): For some reason, the react-scroll link decided to stop the propagation of click events.
     // We do however rely on these events being propagated in certain scenarios (e.g when the link
     // is within a dropdown we want to close upon being clicked). Because of this, we register the