feat: unmount the token selector when its not displaying

4 files changed, 75 insertions, 54 deletions

diff --git a/packages/instant/src/components/animations/slide_animation.tsx b/packages/instant/src/components/animations/slide_animation.tsx
index dc42e168d..6ac47e9a6 100644
--- a/packages/instant/src/components/animations/slide_animation.tsx
+++ b/packages/instant/src/components/animations/slide_animation.tsx
@@ -11,6 +11,7 @@ export interface SlideAnimationProps {
     slideOutSettings: OptionallyScreenSpecific<PositionAnimationSettings>;
     zIndex?: OptionallyScreenSpecific<number>;
     height?: string;
+    onAnimationEnd?: () => void;
 }
 
 export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
@@ -19,7 +20,12 @@ export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = pro
     }
     const positionSettings = props.animationState === 'slidIn' ? props.slideInSettings : props.slideOutSettings;
     return (
-        <PositionAnimation height={props.height} positionSettings={positionSettings} zIndex={props.zIndex}>
+        <PositionAnimation
+            onAnimationEnd={props.onAnimationEnd}
+            height={props.height}
+            positionSettings={positionSettings}
+            zIndex={props.zIndex}
+        >
             {props.children}
         </PositionAnimation>
     );
diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
index b5f01e349..a26fb5cf5 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -154,21 +154,23 @@ const getTokenIcon = (symbol: string): React.StatelessComponent | undefined => {
     }
 };
 
-const TokenSelectorRowIcon: React.StatelessComponent<TokenSelectorRowIconProps> = props => {
-    const { token } = props;
-    const iconUrlIfExists = token.metaData.iconUrl;
+class TokenSelectorRowIcon extends React.PureComponent<TokenSelectorRowIconProps> {
+    public render(): React.ReactNode {
+        const { token } = this.props;
+        const iconUrlIfExists = token.metaData.iconUrl;
 
-    const TokenIcon = getTokenIcon(token.metaData.symbol);
-    const displaySymbol = assetUtils.bestNameForAsset(token);
-    if (!_.isUndefined(iconUrlIfExists)) {
-        return <img src={iconUrlIfExists} />;
-    } else if (!_.isUndefined(TokenIcon)) {
-        return <TokenIcon />;
-    } else {
-        return (
-            <Text fontColor={ColorOption.white} fontSize="8px">
-                {displaySymbol}
-            </Text>
-        );
+        const TokenIcon = getTokenIcon(token.metaData.symbol);
+        const displaySymbol = assetUtils.bestNameForAsset(token);
+        if (!_.isUndefined(iconUrlIfExists)) {
+            return <img src={iconUrlIfExists} />;
+        } else if (!_.isUndefined(TokenIcon)) {
+            return <TokenIcon />;
+        } else {
+            return (
+                <Text fontColor={ColorOption.white} fontSize="8px">
+                    {displaySymbol}
+                </Text>
+            );
+        }
     }
-};
+}
diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx
index 33a483662..9b09a0d80 100644
--- a/packages/instant/src/components/sliding_panel.tsx
+++ b/packages/instant/src/components/sliding_panel.tsx
@@ -30,42 +30,44 @@ Panel.displayName = 'Panel';
 
 export interface SlidingPanelProps extends PanelProps {
     animationState: SlideAnimationState;
+    onAnimationEnd?: () => void;
 }
 
-export const SlidingPanel: React.StatelessComponent<SlidingPanelProps> = props => {
-    if (props.animationState === 'none') {
-        return null;
+export class SlidingPanel extends React.PureComponent<SlidingPanelProps> {
+    public render(): React.ReactNode {
+        if (this.props.animationState === 'none') {
+            return null;
+        }
+        const { animationState, onAnimationEnd, ...rest } = this.props;
+        const slideAmount = '100%';
+        const slideUpSettings: PositionAnimationSettings = {
+            duration: '0.3s',
+            timingFunction: 'ease-in-out',
+            top: {
+                from: slideAmount,
+                to: '0px',
+            },
+            position: 'absolute',
+        };
+        const slideDownSettings: PositionAnimationSettings = {
+            duration: '0.3s',
+            timingFunction: 'ease-out',
+            top: {
+                from: '0px',
+                to: slideAmount,
+            },
+            position: 'absolute',
+        };
+        return (
+            <SlideAnimation
+                slideInSettings={slideUpSettings}
+                slideOutSettings={slideDownSettings}
+                animationState={animationState}
+                height="100%"
+                onAnimationEnd={onAnimationEnd}
+            >
+                <Panel {...rest} />
+            </SlideAnimation>
+        );
     }
-    const { animationState, ...rest } = props;
-    const slideAmount = '100%';
-    const slideUpSettings: PositionAnimationSettings = {
-        duration: '0.3s',
-        timingFunction: 'ease-in-out',
-        top: {
-            from: slideAmount,
-            to: '0px',
-        },
-        position: 'absolute',
-    };
-    const slideDownSettings: PositionAnimationSettings = {
-        duration: '0.3s',
-        timingFunction: 'ease-out',
-        top: {
-            from: '0px',
-            to: slideAmount,
-        },
-        position: 'absolute',
-    };
-    return (
-        <SlideAnimation
-            slideInSettings={slideUpSettings}
-            slideOutSettings={slideDownSettings}
-            animationState={animationState}
-            height="100%"
-        >
-            <Panel {...rest} />
-        </SlideAnimation>
-    );
-};
-
-SlidingPanel.displayName = 'SlidingPanel';
+}
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 63497e639..e8c64d5d1 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -24,7 +24,10 @@ export interface ZeroExInstantContainerState {
     tokenSelectionPanelAnimationState: SlideAnimationState;
 }
 
-export class ZeroExInstantContainer extends React.PureComponent<ZeroExInstantContainerProps, ZeroExInstantContainerState> {
+export class ZeroExInstantContainer extends React.PureComponent<
+    ZeroExInstantContainerProps,
+    ZeroExInstantContainerState
+> {
     public state = {
         tokenSelectionPanelAnimationState: 'none' as SlideAnimationState,
     };
@@ -60,6 +63,7 @@ export class ZeroExInstantContainer extends React.PureComponent<ZeroExInstantCon
                         <SlidingPanel
                             animationState={this.state.tokenSelectionPanelAnimationState}
                             onClose={this._handlePanelCloseClickedX}
+                            onAnimationEnd={this._handleSlidingPanelAnimationEnd}
                         >
                             <AvailableERC20TokenSelector onTokenSelect={this._handlePanelCloseAfterChose} />
                         </SlidingPanel>
@@ -98,4 +102,11 @@ export class ZeroExInstantContainer extends React.PureComponent<ZeroExInstantCon
             tokenSelectionPanelAnimationState: 'slidOut',
         });
     };
+    private readonly _handleSlidingPanelAnimationEnd = (): void => {
+        if (this.state.tokenSelectionPanelAnimationState === 'slidOut') {
+            // When the slidOut animation completes, don't keep the panel mounted.
+            // Performance optimization
+            this.setState({ tokenSelectionPanelAnimationState: 'none' });
+        }
+    };
 }