[DDW-923] Check if header is stuck

Author: Lucas Araujo

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

@@ -99,14 +99,18 @@
     thead {
       background: var(--theme-bordered-box-background-color);
       border-radius: 4px 4px 0 0;
-      box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2);
       display: block;
       margin: -20px -20px 0;
       padding: 0 20px;
       position: sticky;
       top: 0;
+      transition: box-shadow 0.3s ease-in-out;
       z-index: 999;
 
+      &.isHeaderStuck {
+        box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2);
+      }
+
       tr {
         border: 0;
         display: flex;
@@ -144,7 +148,7 @@
       }
     }
 
-    tr {
+    tr:not(:last-child) {
       border-bottom: 1px solid var(--theme-staking-table-border-color);
     }
 

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

@@ -10,6 +10,7 @@ import LoadingSpinner from '../../widgets/LoadingSpinner';
 import BorderedBox from '../../widgets/BorderedBox';
 import { StakePoolsTableHeader } from './StakePoolsTableHeader';
 import { StakePoolsTableBody } from './StakePoolsTableBody';
+import { InView } from '../../widgets/InView';
 
 const messages = defineMessages({
   tableHeaderRank: {
@@ -152,11 +153,14 @@ type State = {
   isPreloading: boolean;
   stakePoolsOrder: string;
   stakePoolsSortBy: string;
+  isHeaderStuck: boolean;
 };
 const initialState = {
   isPreloading: true,
   stakePoolsOrder: 'asc',
   stakePoolsSortBy: 'ranking',
+  isHeaderStuck: false,
+  isTest: true,
 };
 
 @observer
@@ -176,10 +180,11 @@ class StakePoolsTable extends Component<Props, State> {
   componentDidMount() {
     this._isMounted = true;
     setTimeout(() => {
-      if (this._isMounted)
+      if (this._isMounted) {
         this.setState({
           isPreloading: false,
         });
+      }
     }, 0);
   }
 
@@ -215,11 +220,15 @@ class StakePoolsTable extends Component<Props, State> {
       listName,
       onSelect,
       selectedPoolId,
-      currentLocale,
       onTableHeaderMouseEnter,
       onTableHeaderMouseLeave,
     } = this.props;
-    const { isPreloading, stakePoolsSortBy, stakePoolsOrder } = this.state;
+    const {
+      isPreloading,
+      stakePoolsSortBy,
+      stakePoolsOrder,
+      isHeaderStuck,
+    } = this.state;
     const { intl } = this.context;
     const componentClasses = classNames([styles.component, listName]);
     if (stakePoolsList.length > PRELOADER_THRESHOLD && isPreloading)
@@ -375,8 +384,14 @@ class StakePoolsTable extends Component<Props, State> {
         <div className={componentClasses}>
           {sortedStakePoolList.length > 0 && (
             <BorderedBox>
+              <InView
+                onChange={(visible) =>
+                  this.setState({ isHeaderStuck: !visible })
+                }
+              />
               <table>
                 <thead
+                  className={isHeaderStuck ? styles.isHeaderStuck : ''}
                   onMouseEnter={onTableHeaderMouseEnter}
                   onMouseLeave={onTableHeaderMouseLeave}
                 >

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

@@ -0,0 +1,30 @@
+import React, { useRef, useCallback } from 'react';
+
+type Props = {
+  onChange: (visible: boolean) => void;
+};
+
+export const InView = ({ onChange }: Props) => {
+  const elementRef = useRef(null);
+  const observerRef = useRef(
+    new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        onChange(entry.isIntersecting);
+      });
+    })
+  );
+
+  const setElementRef = useCallback((element) => {
+    if (elementRef.current) {
+      observerRef.current.unobserve(elementRef.current);
+    }
+
+    if (element) {
+      observerRef.current.observe(element);
+    }
+
+    elementRef.current = element;
+  }, []);
+
+  return <div ref={setElementRef} />;
+};