[WEB-5501] refactor: optimize component structures and improve hooks (#8174)

* [WEB-5501] refactor: optimize component structures and improve hooks

- Updated type definitions in AppProvider to use React.ReactNode for children.
- Enhanced HomePeekOverviewsRoot by using MobX observer and integrating issue detail hook.
- Optimized ContentOverflowWrapper to prevent unnecessary re-renders by adjusting useEffect dependencies.
- Updated DashboardQuickLinks to include necessary dependencies in useCallback.
- Refactored GlobalShortcutsProvider to utilize refs for context and handler management, improving performance.
- Changed useCurrentTime to update every minute instead of every second.
- Refactored outside click hooks to use useCallback for better performance.
- Improved IntercomProvider and PostHogProvider to prevent multiple initializations using refs.

* refactor: simplify conditional rendering in HomePeekOverviewsRoot component

* refactor: improve outside click detection in sidebar and peek overview hooks

* refactor: enhance IntercomProvider and PostHogProvider with hydration state management

apps/web/core/lib/intercom-provider.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Intercom, show, hide, onHide } from "@intercom/messenger-js-sdk";
 import { observer } from "mobx-react";
 // store hooks
@@ -16,27 +16,38 @@ const IntercomProvider = observer(function IntercomProvider(props: IntercomProvi
   const { data: user } = useUser();
   const { config } = useInstance();
   const { isIntercomToggle, toggleIntercom } = useTransient();
+  // refs
+  const isInitializedRef = useRef(false);
+  // states
+  const [hydrated, setHydrated] = useState(false);
+  // derived values
+  const isIntercomEnabled = user && config && config.is_intercom_enabled && config.intercom_app_id;
 
   useEffect(() => {
+    if (!hydrated) return;
     if (isIntercomToggle) show();
     else hide();
-  }, [isIntercomToggle]);
-
-  onHide(() => {
-    toggleIntercom(false);
-  });
+  }, [hydrated, isIntercomToggle]);
 
   useEffect(() => {
-    if (user && config?.is_intercom_enabled && config.intercom_app_id) {
-      Intercom({
-        app_id: config.intercom_app_id || "",
-        user_id: user.id,
-        name: `${user.first_name} ${user.last_name}`,
-        email: user.email,
-        hide_default_launcher: true,
-      });
-    }
-  }, [user, config, toggleIntercom]);
+    if (!hydrated) return;
+    onHide(() => {
+      toggleIntercom(false);
+    });
+  }, [hydrated, toggleIntercom]);
+
+  useEffect(() => {
+    if (!isIntercomEnabled || isInitializedRef.current) return; // prevent multiple initializations
+    Intercom({
+      app_id: config.intercom_app_id || "",
+      user_id: user.id,
+      name: `${user.first_name} ${user.last_name}`,
+      email: user.email,
+      hide_default_launcher: true,
+    });
+    isInitializedRef.current = true;
+    setHydrated(true);
+  }, [isIntercomEnabled, config, user]);
 
   return <>{children}</>;
 });