Merge pull request #17 from RedisInsight/feature/RI-2051-string-loading

#RI-2051 - add spinner for loading string value

Author: rsergeenko

redisinsight/ui/src/pages/browser/components/string-details/StringDetails.tsx

@@ -7,9 +7,11 @@ import React, {
   useState,
 } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { EuiText, EuiTextArea } from '@elastic/eui'
+import { EuiLoadingSpinner, EuiText, EuiTextArea } from '@elastic/eui'
 
+import { Nullable } from 'uiSrc/utils'
 import {
+  resetStringValue,
   stringDataSelector,
   stringSelector,
   updateStringValueAction,
@@ -32,7 +34,7 @@ const StringDetails = (props: Props) => {
   const { isEditItem, setIsEdit } = props
 
   const [rows, setRows] = useState<number>(5)
-  const [value, setValue] = useState<string>('')
+  const [value, setValue] = useState<Nullable<string>>(null)
   const [areaValue, setAreaValue] = useState<string>('')
 
   const { loading } = useSelector(stringSelector)
@@ -42,14 +44,18 @@ const StringDetails = (props: Props) => {
 
   const dispatch = useDispatch()
 
+  useEffect(() => () => {
+    dispatch(resetStringValue())
+  }, [])
+
   useEffect(() => {
     setValue(initialValue)
-    setAreaValue(initialValue)
+    setAreaValue(initialValue || '')
   }, [initialValue])
 
   useEffect(() => {
     // Approximate calculation of textarea rows by initialValue
-    if (!isEditItem || !textAreaRef.current) {
+    if (!isEditItem || !textAreaRef.current || value === null) {
       return
     }
 
@@ -78,24 +84,31 @@ const StringDetails = (props: Props) => {
   }
 
   const onDeclineChanges = () => {
-    setAreaValue(value)
+    setAreaValue(value || '')
     setIsEdit(false)
   }
 
+  const isLoading = loading || value === null
+
   return (
     <div className={styles.container}>
-      {!isEditItem && !loading && (
+      {isLoading && (
+        <div className={styles.spinnerWrapper}>
+          <EuiLoadingSpinner size="xl" />
+        </div>
+      )}
+      {!isEditItem && !isLoading && (
         <EuiText
           onClick={() => setIsEdit(true)}
         >
           <pre className={styles.stringValue} data-testid="string-value">
-            {value.length ? value : (<span style={{ fontStyle: 'italic' }}>Empty</span>)}
+            {value !== '' ? value : (<span style={{ fontStyle: 'italic' }}>Empty</span>)}
           </pre>
         </EuiText>
       )}
       {isEditItem && (
         <InlineItemEditor
-          initialValue={value}
+          initialValue={value || ''}
           controlsPosition="bottom"
           placeholder="Enter Value"
           fieldName="value"

redisinsight/ui/src/pages/browser/components/string-details/styles.module.scss

@@ -34,6 +34,14 @@ $outer-height-mobile: 340px;
   background: inherit !important;
 }
 
+.spinnerWrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .stringTextArea {
   max-height: calc(100vh - #{$outer-height} - 55px);
   @media only screen and (max-width: 767px) {

redisinsight/ui/src/slices/interfaces/string.ts

@@ -0,0 +1,10 @@
+import { Nullable } from 'uiSrc/utils'
+
+export interface StringState {
+  loading: boolean
+  error: string
+  data: {
+    key: string
+    value: Nullable<string>
+  }
+}

redisinsight/ui/src/slices/string.ts

@@ -7,13 +7,14 @@ import { getApiErrorMessage, getUrl, isStatusSuccessful } from 'uiSrc/utils'
 import { refreshKeyInfoAction } from './keys'
 import { addErrorNotification } from './app/notifications'
 import { AppDispatch, RootState } from './store'
+import { StringState } from './interfaces/string'
 
-export const initialState = {
+export const initialState: StringState = {
   loading: false,
   error: '',
   data: {
     key: '',
-    value: '',
+    value: null,
   },
 }
 
@@ -51,7 +52,7 @@ const stringSlice = createSlice({
     },
     resetStringValue: (state) => {
       state.data.key = ''
-      state.data.value = ''
+      state.data.value = null
     },
   },
 })