[Backport 4.5] Fix cannot read null properties bug in settings section (

#5217)

Fix cannot read null properties bug in settings section (#5135)

* fixed bug cannot read null properties in settings section

* changelog

(cherry picked from commit 4c113f7)

Co-authored-by: Chantal Belén kelm <99441266+chantal-kelm@users.noreply.github.com>

CHANGELOG.md

@@ -21,6 +21,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Fixed the display of more than one protocol in the Global configuration section [#4917](https://github.com/wazuh/wazuh-kibana-app/pull/4917)
 - Handling endpoint response was done when there is no data to show [#4918](https://github.com/wazuh/wazuh-kibana-app/pull/4918)
 - Fixed references to Elasticsearch in Wazuh-stack plugin [4894](https://github.com/wazuh/wazuh-kibana-app/pull/4894)
+- Fixed the 2 errors that appeared in console in Settings>Configuration section. [#5135](https://github.com/wazuh/wazuh-kibana-app/pull/5135)
 
 ## Wazuh v4.4.0 - OpenSearch Dashboards 2.3.0 - Revision 4400
 

public/components/common/hooks/use-kbn-loading-indicator.ts

@@ -10,7 +10,7 @@
  * Find more information about this on the LICENSE file.
  */
 import { getHttp } from '../../../kibana-services';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { BehaviorSubject } from 'rxjs';
 
 export const useKbnLoadingIndicator = (): [
@@ -21,28 +21,27 @@ export const useKbnLoadingIndicator = (): [
   const [loading, setLoading] = useState(false);
   const [flag, setFlag] = useState(false);
   const [visible, setVisible] = useState(0);
-
-  const loadingCount$ = new BehaviorSubject(0);
-
+  const loadingCount$ = useRef(new BehaviorSubject(0))
+
   useEffect(() => {
-    getHttp().addLoadingCountSource(loadingCount$);
-    const { unsubscribe } = getHttp() 
+    getHttp().addLoadingCountSource(loadingCount$.current);
+    const subscriber = getHttp() 
       .getLoadingCount$()
       .subscribe((count) => {
         setVisible(count);
         !count && setFlag(false);
       });
-    return unsubscribe;
+    return () => subscriber.unsubscribe();
   }, []);
 
   useEffect(() => {
     if (loading && visible <= 0) {
-      loadingCount$.next(loadingCount$.value + 1);
+      loadingCount$.current.next(loadingCount$.current.value + 1);
       setFlag(true);
     }
 
     if (!loading && flag && visible > 0) {
-      loadingCount$.next(loadingCount$.value - 1);
+      loadingCount$.current.next(loadingCount$.current.value - 1);
     }
   }, [visible, loading]);
   return [loading, setLoading, visible > 0];