optimize auto scroll

addon/web/client/public/index.html

@@ -33,6 +33,7 @@
 
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="hidden-bottom" style="height: 0px; visibility: hidden;">bottom</div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

addon/web/client/src/App.tsx

@@ -21,17 +21,20 @@ interface IState {
 
 const wsReconnIntervals = [1, 1, 2, 2, 4, 4, 8, 8, 16, 16, 32, 32]
 
-class App extends React.Component<any, IState> {
+interface IProps {
+  pageBottom: HTMLElement
+}
+
+class App extends React.Component<IProps, IState> {
   private flowMgr: FlowManager
   private ws: WebSocket | null
   private wsUnmountClose: boolean
 
-  private pageBottom: HTMLDivElement | null
   private autoScore = false
 
   private wsReconnCount = -1
 
-  constructor(props: any) {
+  constructor(props: IProps) {
     super(props)
 
     this.flowMgr = new FlowManager()
@@ -46,7 +49,7 @@ class App extends React.Component<any, IState> {
     this.ws = null
     this.wsUnmountClose = false
 
-    this.pageBottom = null
+    this.initScrollMonitor()
   }
 
   componentDidMount() {
@@ -110,7 +113,9 @@ class App extends React.Component<any, IState> {
         const flow = new Flow(msg)
         this.flowMgr.add(flow)
         this.setState({ flows: this.flowMgr.showList() }, () => {
-          if (this.pageBottom && this.autoScore) this.pageBottom.scrollIntoView({ behavior: 'auto' })
+          if (this.autoScore) {
+            this.props.pageBottom.scrollIntoView({ behavior: 'auto' })
+          }
         })
       }
       else if (msg.type === MessageType.REQUEST_BODY) {
@@ -135,9 +140,7 @@ class App extends React.Component<any, IState> {
   }
 
   initScrollMonitor() {
-    if (!this.pageBottom) return
+    const watcher = scrollMonitor.create(this.props.pageBottom)
-
-    const watcher = scrollMonitor.create(this.pageBottom)
     watcher.enterViewport(() => {
       this.autoScore = true
     })
@@ -215,12 +218,6 @@ class App extends React.Component<any, IState> {
           onReRenderFlows={() => { this.setState({ flows: this.state.flows }) }}
           onMessage={msg => { if (this.ws) this.ws.send(msg) }}
         />
-
-        <div ref={el => {
-          if (this.pageBottom) return
-          this.pageBottom = el
-          this.initScrollMonitor()
-        }} style={{ height: '0px', visibility: 'hidden' }}>bottom</div>
       </div>
     )
   }

addon/web/client/src/index.tsx

@@ -4,9 +4,11 @@ import 'bootstrap/dist/css/bootstrap.min.css'
 import App from './App'
 import reportWebVitals from './reportWebVitals'
 
+const pageBottom = document.getElementById('hidden-bottom')
+
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <App pageBottom={pageBottom as HTMLElement} />
   </React.StrictMode>,
   document.getElementById('root')
 )