refactor: lazy load KBar data fetching hooks only when opened (#27314)

* refactor: lazy load KBar data fetching hooks only when opened

Co-Authored-By: alex@cal.com <me@alexvanandel.com>

* refactor: move KBar data fetching into RenderResults for proper lazy loading

Co-Authored-By: alex@cal.com <me@alexvanandel.com>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

apps/web/modules/shell/Kbar.tsx

@@ -1,4 +1,5 @@
 import { appStoreMetadata } from "@calcom/app-store/appStoreMetaData";
+import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { isMac } from "@calcom/lib/isMac";
 import { trpc } from "@calcom/trpc/react";
@@ -20,8 +21,6 @@ import { useRouter } from "next/navigation";
 import type { ReactNode } from "react";
 import { useEffect, useMemo } from "react";
 
-import dayjs from "@calcom/dayjs";
-
 type ShortcutArrayType = {
   shortcuts?: string[];
 };
@@ -319,8 +318,6 @@ function CommandKey(): JSX.Element {
 
 const KBarContent = (): JSX.Element => {
   const { t } = useLocale();
-  useEventTypesAction();
-  useUpcomingBookingsAction();
 
   return (
     <KBarPortal>
@@ -459,6 +456,9 @@ function RenderResults(): JSX.Element {
   const { searchQuery } = useKBar((state) => ({ searchQuery: state.searchQuery }));
   const { t } = useLocale();
 
+  useEventTypesAction();
+  useUpcomingBookingsAction();
+
   if (results.length === 0 && searchQuery.trim().length > 0) {
     return <NoResultsFound searchQuery={searchQuery} />;
   }