[DDW-923] Refactor to only re-render header

Author: Lucas Araujo

source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss

@@ -104,10 +104,10 @@
       padding: 0 20px;
       position: sticky;
       top: 0;
-      transition: box-shadow 0.3s ease-in-out;
+      transition: box-shadow 0.1s ease-in-out;
       z-index: 999;
 
-      &.isHeaderStuck {
+      &.headerStuck {
         box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2);
       }
 

source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx

@@ -153,13 +153,11 @@ type State = {
   isPreloading: boolean;
   stakePoolsOrder: string;
   stakePoolsSortBy: string;
-  isHeaderStuck: boolean;
 };
 const initialState = {
   isPreloading: true,
   stakePoolsOrder: 'asc',
   stakePoolsSortBy: 'ranking',
-  isHeaderStuck: false,
 };
 
 @observer
@@ -221,12 +219,7 @@ class StakePoolsTable extends Component<Props, State> {
       onTableHeaderMouseEnter,
       onTableHeaderMouseLeave,
     } = this.props;
-    const {
-      isPreloading,
-      stakePoolsSortBy,
-      stakePoolsOrder,
-      isHeaderStuck,
-    } = this.state;
+    const { isPreloading, stakePoolsSortBy, stakePoolsOrder } = this.state;
     const { intl } = this.context;
     const componentClasses = classNames([styles.component, listName]);
     if (stakePoolsList.length > PRELOADER_THRESHOLD && isPreloading)
@@ -377,31 +370,35 @@ class StakePoolsTable extends Component<Props, State> {
         title: intl.formatMessage(messages.tableHeaderRetiring),
       },
     ];
+
     return (
       <div>
         <div className={componentClasses}>
           {sortedStakePoolList.length > 0 && (
             <BorderedBox>
-              <InView
-                onChange={(visible) =>
-                  this.setState({ isHeaderStuck: !visible })
-                }
-              />
               <table>
-                <thead
-                  className={isHeaderStuck ? styles.isHeaderStuck : ''}
-                  onMouseEnter={onTableHeaderMouseEnter}
-                  onMouseLeave={onTableHeaderMouseLeave}
-                >
-                  <tr>
-                    <StakePoolsTableHeader
-                      availableTableHeaders={availableTableHeaders}
-                      stakePoolsSortBy={stakePoolsSortBy}
-                      stakePoolsOrder={stakePoolsOrder}
-                      onHandleSort={this.handleSort}
-                    />
-                  </tr>
-                </thead>
+                <InView>
+                  {({ isInViewport, setTargetRef }) => (
+                    <>
+                      <caption ref={setTargetRef} />
+                      <thead
+                        className={!isInViewport ? styles.headerStuck : ''}
+                        onMouseEnter={onTableHeaderMouseEnter}
+                        onMouseLeave={onTableHeaderMouseLeave}
+                      >
+                        <tr>
+                          <StakePoolsTableHeader
+                            availableTableHeaders={availableTableHeaders}
+                            stakePoolsSortBy={stakePoolsSortBy}
+                            stakePoolsOrder={stakePoolsOrder}
+                            onHandleSort={this.handleSort}
+                          />
+                        </tr>
+                      </thead>
+                    </>
+                  )}
+                </InView>
+
                 <tbody>
                   <StakePoolsTableBody
                     // @ts-ignore ts-migrate(2769) FIXME: No overload matches this call.

source/renderer/app/components/widgets/InView.tsx

@@ -1,30 +1,34 @@
-import React, { useRef, useCallback } from 'react';
+import { useRef, useState, useCallback } from 'react';
 
 type Props = {
-  onChange: (visible: boolean) => void;
+  children: (props: {
+    isInViewport: boolean;
+    setTargetRef: (target: HTMLElement) => void;
+  }) => JSX.Element;
 };
 
-export const InView = ({ onChange }: Props) => {
-  const elementRef = useRef(null);
+export const InView = ({ children }: Props) => {
+  const [isInViewport, setIsInViewport] = useState(true);
+  const targetRef = useRef(null);
   const observerRef = useRef(
     new IntersectionObserver((entries) => {
       entries.forEach((entry) => {
-        onChange(entry.isIntersecting);
+        setIsInViewport(entry.isIntersecting);
       });
     })
   );
 
-  const setElementRef = useCallback((element) => {
-    if (elementRef.current) {
-      observerRef.current.unobserve(elementRef.current);
+  const setTargetRef = useCallback((target: HTMLElement) => {
+    if (targetRef.current) {
+      observerRef.current.unobserve(targetRef.current);
     }
 
-    if (element) {
-      observerRef.current.observe(element);
+    if (target) {
+      observerRef.current.observe(target);
     }
 
-    elementRef.current = element;
+    targetRef.current = target;
   }, []);
 
-  return <div ref={setElementRef} />;
+  return children({ isInViewport, setTargetRef });
 };