7
7
EuiToolTip ,
8
8
} from '@elastic/eui'
9
9
import { capitalize , map } from 'lodash'
10
- import React , { useContext , useEffect , useState } from 'react'
10
+ import React , { useContext , useEffect , useRef , useState } from 'react'
11
11
import { useDispatch , useSelector } from 'react-redux'
12
12
import { useHistory , useLocation } from 'react-router-dom'
13
13
import cx from 'classnames'
@@ -30,6 +30,7 @@ import { resetRedisearchKeysData } from 'uiSrc/slices/browser/redisearch'
30
30
import { PageNames , Pages , Theme } from 'uiSrc/constants'
31
31
import { sendEventTelemetry , TelemetryEvent , getRedisModulesSummary } from 'uiSrc/telemetry'
32
32
import { ThemeContext } from 'uiSrc/contexts/themeContext'
33
+ import { ShowChildByCondition } from 'uiSrc/components'
33
34
import { formatLongName , getDbIndex , lastConnectionFormat , Nullable , replaceSpaces } from 'uiSrc/utils'
34
35
import { appContextSelector , setAppContextInitialState } from 'uiSrc/slices/app/context'
35
36
import { resetCliHelperSettings , resetCliSettingsAction } from 'uiSrc/slices/cli/cli-settings'
@@ -69,6 +70,7 @@ const DatabasesListWrapper = ({
69
70
const instances = useSelector ( instancesSelector )
70
71
const [ , forceRerender ] = useState ( { } )
71
72
const deleting = { id : '' }
73
+ const isLoadingRef = useRef ( false )
72
74
73
75
const closePopover = ( ) => {
74
76
deleting . id = ''
@@ -91,6 +93,9 @@ const DatabasesListWrapper = ({
91
93
history . replace ( Pages . home )
92
94
} , 1000 )
93
95
}
96
+
97
+ isLoadingRef . current = instances . loading
98
+ forceRerender ( { } )
94
99
} , [ instances . loading , search ] )
95
100
96
101
useEffect ( ( ) => {
@@ -209,41 +214,46 @@ const DatabasesListWrapper = ({
209
214
render : function InstanceCell ( name : string = '' , instance : Instance ) {
210
215
const { id, db, new : newStatus = false } = instance
211
216
const cellContent = replaceSpaces ( name . substring ( 0 , 200 ) )
217
+
212
218
return (
213
219
< div
214
220
role = "presentation"
215
221
>
216
222
{ newStatus && (
217
- < EuiToolTip
218
- content = "New"
219
- position = "top"
220
- anchorClassName = { styles . newStatusAnchor }
221
- >
222
- < div className = { styles . newStatus } data-testid = { `database-status-new-${ id } ` } />
223
- </ EuiToolTip >
223
+ < ShowChildByCondition isShow = { ! isLoadingRef . current } innerClassName = { styles . newStatusAnchor } >
224
+ < EuiToolTip
225
+ content = "New"
226
+ position = "top"
227
+ anchorClassName = { styles . newStatusAnchor }
228
+ >
229
+ < div className = { styles . newStatus } data-testid = { `database-status-new-${ id } ` } />
230
+ </ EuiToolTip >
231
+ </ ShowChildByCondition >
224
232
) }
225
- < EuiToolTip
226
- position = "bottom"
227
- title = "Database Alias"
228
- className = { styles . tooltipColumnName }
229
- content = { `${ formatLongName ( name ) } ${ getDbIndex ( db ) } ` }
230
- >
231
- < EuiText
232
- className = { styles . tooltipAnchorColumnName }
233
- data-testid = { `instance-name-${ id } ` }
234
- onClick = { ( e : React . MouseEvent ) => handleCheckConnectToInstance ( e , instance ) }
235
- onKeyDown = { ( e : React . KeyboardEvent ) => handleCheckConnectToInstance ( e , instance ) }
233
+ < ShowChildByCondition isShow = { ! isLoadingRef . current } >
234
+ < EuiToolTip
235
+ position = "bottom"
236
+ title = "Database Alias"
237
+ className = { styles . tooltipColumnName }
238
+ content = { `${ formatLongName ( name ) } ${ getDbIndex ( db ) } ` }
236
239
>
237
- < EuiTextColor
238
- className = { cx ( styles . tooltipColumnNameText , { [ styles . withDb ] : db } ) }
240
+ < EuiText
241
+ className = { styles . tooltipAnchorColumnName }
242
+ data-testid = { `instance-name-${ id } ` }
243
+ onClick = { ( e : React . MouseEvent ) => handleCheckConnectToInstance ( e , instance ) }
244
+ onKeyDown = { ( e : React . KeyboardEvent ) => handleCheckConnectToInstance ( e , instance ) }
239
245
>
240
- { cellContent }
241
- </ EuiTextColor >
242
- < EuiTextColor >
243
- { ` ${ getDbIndex ( db ) } ` }
244
- </ EuiTextColor >
245
- </ EuiText >
246
- </ EuiToolTip >
246
+ < EuiTextColor
247
+ className = { cx ( styles . tooltipColumnNameText , { [ styles . withDb ] : db } ) }
248
+ >
249
+ { cellContent }
250
+ </ EuiTextColor >
251
+ < EuiTextColor >
252
+ { ` ${ getDbIndex ( db ) } ` }
253
+ </ EuiTextColor >
254
+ </ EuiText >
255
+ </ EuiToolTip >
256
+ </ ShowChildByCondition >
247
257
</ div >
248
258
)
249
259
} ,
0 commit comments