chore: Memoising some computations within WDS_TOOLBAR_BUTTONS_WIDGET (#35436)

## Description
Memoising some computations related to WDS_TOOLBAR_BUTTONS_WIDGET

Fixes #`Issue Number`  

## Automation

/ok-to-test tags="@tag.All"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10264040446>
> Commit: c15e274b718fc36f17b8f7edda4f23790b72f16d
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10264040446&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Tue, 06 Aug 2024 10:43:05 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

- **Performance Enhancements**
- Optimized the `ToolbarButtons` component for improved efficiency by
utilizing the `useMemo` hook, reducing unnecessary calculations and
re-renders.
- Consolidated the computation of `sortedButtons` and `disabledKeys` in
`ToolbarButtonsComponent` for better performance and clarity.
  
- **Telemetry Integration**
- Added performance tracking capabilities to the `withWidgetProps`
higher-order component, enhancing observability of widget performance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/packages/design-system/widgets/src/components/ToolbarButtons/src/ToolbarButtons.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useMemo } from "react";
 import { Button, Menu } from "@design-system/widgets";
 import { FocusScope } from "@react-aria/focus";
 import { useDOMRef } from "@react-spectrum/utils";
@@ -37,11 +37,14 @@ const _ToolbarButtonsInner = <T extends ToolbarButtonsItem>(
     domRef,
   );
 
-  let children = [...state.collection];
-  const menuChildren = (props.items as ToolbarButtonsItem[]).slice(
-    visibleItems,
+  const menuChildren = useMemo(
+    () => (props.items as ToolbarButtonsItem[]).slice(visibleItems),
+    [props.items, visibleItems],
+  );
+  const children = useMemo(
+    () => [...state.collection].slice(0, visibleItems),
+    [state.collection, visibleItems],
   );
-  children = children.slice(0, visibleItems);
 
   return (
     <FocusScope>

app/client/src/widgets/wds/WDSToolbarButtonsWidget/component/index.tsx

@@ -1,5 +1,5 @@
 import type { Key } from "react";
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { ToolbarButtons } from "@design-system/widgets";
 import type {
   ToolbarButtonsComponentProps,
@@ -23,21 +23,24 @@ export const ToolbarButtonsComponent = (
     variant,
   } = props;
 
-  const sortedButtons = sortBy(
-    Object.keys(buttonsList)
+  const { disabledKeys, sortedButtons } = useMemo(() => {
+    const sortedButtons = sortBy(
+      Object.keys(buttonsList)
+        .map((key) => buttonsList[key])
+        .filter((button) => {
+          return button.isVisible === true;
+        }),
+      ["index"],
+    );
+
+    const disabledKeys = Object.keys(buttonsList)
       .map((key) => buttonsList[key])
       .filter((button) => {
-        return button.isVisible === true;
-      }),
-    ["index"],
-  );
-
-  const disabledKeys = Object.keys(buttonsList)
-    .map((key) => buttonsList[key])
-    .filter((button) => {
-      return button.isDisabled;
-    })
-    .map((button) => button.id);
+        return button.isDisabled;
+      })
+      .map((button) => button.id);
+    return { sortedButtons, disabledKeys };
+  }, [buttonsList]);
 
   const onActionComplete = (button: ToolbarButtonsItemComponentProps) => {
     const newLoadingButtonIds = [...loadingButtonIds];

app/client/src/widgets/withWidgetProps.tsx

@@ -51,6 +51,7 @@ import WidgetFactory from "WidgetProvider/factory";
 import { getIsAnvilLayout } from "layoutSystems/anvil/integrations/selectors";
 import { WidgetProfiler } from "./BaseWidgetHOC/WidgetProfiler";
 import { getAppsmithConfigs } from "@appsmith/configs";
+import { endSpan, startRootSpan } from "UITelemetry/generateTraces";
 const { newRelic } = getAppsmithConfigs();
 
 const WIDGETS_WITH_CHILD_WIDGETS = ["LIST_WIDGET", "FORM_WIDGET"];
@@ -69,6 +70,7 @@ function withWidgetProps(WrappedWidget: typeof BaseWidget) {
       widgetId,
     } = props;
 
+    const span = startRootSpan("withWidgetProps", { widgetType: type });
     const isPreviewMode = useSelector(combinedPreviewModeSelector);
 
     const canvasWidget = useSelector((state: AppState) =>
@@ -253,7 +255,7 @@ function withWidgetProps(WrappedWidget: typeof BaseWidget) {
 
     // adding google maps api key to widget props (although meant for map widget only)
     widgetProps.googleMapsApiKey = googleMapsApiKey;
-
+    endSpan(span);
     // isVisible prop defines whether to render a detached widget
     if (
       widgetProps.detachFromLayout &&