From d2a7fbbdd9a504aec35d5a6a9d4f3ff4966d01bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chantal=20Bel=C3=A9n=20kelm?=
 <99441266+chantal-kelm@users.noreply.github.com>
Date: Fri, 17 Feb 2023 12:26:48 -0300
Subject: [PATCH] Fix cannot read null properties bug in settings section
 (#5135)

* fixed bug cannot read null properties in settings section

* changelog

(cherry picked from commit 4c113f7f613e0c52d1e070721f64056c2b38d7e2)
---
 CHANGELOG.md                                    |  1 +
 .../common/hooks/use-kbn-loading-indicator.ts   | 17 ++++++++---------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e27b12cf77..404f0d7e9a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Fixed several typos in the code, by @jctello [#4911](https://github.com/wazuh/wazuh-kibana-app/pull/4911)
 - 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 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 - Kibana 7.10.2, 7.16.x, 7.17.x - Revision 4400
 
diff --git a/public/components/common/hooks/use-kbn-loading-indicator.ts b/public/components/common/hooks/use-kbn-loading-indicator.ts
index 5514f4e041..6073f94d56 100644
--- a/public/components/common/hooks/use-kbn-loading-indicator.ts
+++ b/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];