@centreon/ui 24.10.25 → 24.10.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.10.25",
+  "version": "24.10.26",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Dashboard/Item.tsx

@@ -13,7 +13,6 @@ import { equals, isNil, prop } from 'ramda';
 
 import { Card, useTheme } from '@mui/material';
 
-import LoadingSkeleton from '../LoadingSkeleton';
 import { useMemoComponent, useViewportIntersection } from '../utils';
 
 import { useDashboardItemStyles } from './Dashboard.styles';
@@ -22,7 +21,10 @@ import { isResizingItemAtom } from './atoms';
 interface DashboardItemProps {
   additionalMemoProps?: Array<unknown>;
   canMove?: boolean;
-  children: ReactElement;
+  children: Array<
+    | ReactElement
+    | (({ isInViewport }: { isInViewport: boolean }) => ReactElement)
+  >;
   className?: string;
   disablePadding?: boolean;
   header?: ReactElement;
@@ -119,15 +121,8 @@ const Item = forwardRef<HTMLDivElement, DashboardItemProps>(
                 !disablePadding && classes.widgetPadding
               )}
             >
-              {!isInViewport ? (
-                <LoadingSkeleton
-                  animation={false}
-                  data-widget-skeleton={id}
-                  height="100%"
-                  width="100%"
-                />
-              ) : (
-                children
+              {children.map((child) =>
+                typeof child === 'function' ? child({ isInViewport }) : child
               )}
             </div>
           </Card>

package/src/api/useGraphQuery/index.ts

@@ -37,6 +37,7 @@ interface UseMetricsQueryProps {
     timePeriodType: number;
   };
   isEnabled?: boolean;
+  enforceIsEnabled?: boolean;
 }
 
 interface UseMetricsQueryState {
@@ -103,7 +104,8 @@ const useGraphQuery = ({
   refreshCount,
   bypassQueryParams = false,
   prefix,
-  isEnabled = true
+  isEnabled = true,
+  enforceIsEnabled
 }: UseMetricsQueryProps): UseMetricsQueryState => {
   const timePeriodToUse = equals(timePeriod?.timePeriodType, -1)
     ? {
@@ -161,9 +163,10 @@ const useGraphQuery = ({
     ],
     queryOptions: {
       enabled:
-        areResourcesFullfilled(resources) &&
-        !isEmpty(definedMetrics) &&
-        isEnabled,
+        enforceIsEnabled ??
+        (areResourcesFullfilled(resources) &&
+          !isEmpty(definedMetrics) &&
+          isEnabled),
       refetchInterval: refreshInterval,
       suspense: false
     },

package/src/utils/useViewportIntersection.ts

@@ -18,10 +18,9 @@ export const useViewportIntersection = (
       observer.current.disconnect();
     }
 
-    observer.current = new window.IntersectionObserver(
-      ([newEntry]) => setEntry(newEntry),
-      options
-    );
+    observer.current = new window.IntersectionObserver(([newEntry]) => {
+      setEntry(newEntry);
+    }, options);
 
     if (element) {
       observer.current.observe(element);