feat(neuron-ui): disable fadein animation on details list

Author: Keith-CY

packages/neuron-ui/src/components/Addresses/index.tsx

@@ -17,6 +17,7 @@ import { StateWithDispatch } from 'states/stateProvider/reducer'
 import { useLocalDescription } from 'utils/hooks'
 import { MIN_CELL_WIDTH, Routes } from 'utils/const'
 import { localNumberFormatter, shannonToCKBFormatter } from 'utils/formatters'
+import { onRenderRow } from 'utils/fabricUIRender'
 
 const Addresses = ({
   app: {
@@ -180,6 +181,7 @@ const Addresses = ({
         contextMenu({ type: 'addressList', id: item.identifier })
       }}
       className="listWithDesc"
+      onRenderRow={onRenderRow}
     />
   )
 }

packages/neuron-ui/src/components/Overview/index.tsx

@@ -103,9 +103,14 @@ const Overview = ({
 
   const onTransactionRowRender = useCallback((props?: IDetailsRowProps) => {
     if (props) {
-      const customStyles: Partial<IDetailsRowStyles> = {}
+      const customStyles: Partial<IDetailsRowStyles> = {
+        root: {
+          animationDuration: '0!important',
+        },
+      }
       if (props.item.status === 'failed') {
         customStyles.root = {
+          animationDuration: '0!important',
           color: 'red',
         }
       }

packages/neuron-ui/src/components/TransactionList/index.tsx

@@ -17,6 +17,7 @@ import { contextMenu, showTransactionDetails } from 'services/remote'
 
 import { useLocalDescription } from 'utils/hooks'
 import { shannonToCKBFormatter, uniformTimeFormatter as timeFormatter, uniformTimeFormatter } from 'utils/formatters'
+import { onRenderRow } from 'utils/fabricUIRender'
 
 const theme = getTheme()
 
@@ -212,6 +213,7 @@ const TransactionList = ({
         }
       }}
       className="listWithDesc"
+      onRenderRow={onRenderRow}
     />
   )
 }

packages/neuron-ui/src/utils/fabricUIRender.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { DetailsRow, IDetailsRowProps } from 'office-ui-fabric-react'
+
+export const onRenderRow = (rowProps?: IDetailsRowProps) => {
+  return rowProps ? (
+    <DetailsRow
+      {...rowProps}
+      styles={{
+        root: {
+          animationDuration: '0!important',
+        },
+      }}
+    />
+  ) : null
+}
+
+export default {
+  onRenderRow,
+}