@centreon/ui 26.5.10 → 26.5.11

package/package.json

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

package/src/Dashboard/Item.tsx

@@ -13,7 +13,6 @@ import {
 
 import ExpandableContainer from '../components/ExpandableContainer';
 import type { Parameters } from '../components/ExpandableContainer/models';
-import LoadingSkeleton from '../LoadingSkeleton';
 import { useMemoComponent, useViewportIntersection } from '../utils';
 import { isResizingItemAtom } from './atoms';
 import { useDashboardItemStyles } from './Dashboard.styles';
@@ -21,7 +20,10 @@ import { useDashboardItemStyles } from './Dashboard.styles';
 interface DashboardItemProps {
   additionalMemoProps?: Array<unknown>;
   canMove?: boolean;
-  children: ReactElement;
+  children: Array<
+    | ReactElement
+    | (({ isInViewport }: { isInViewport: boolean }) => ReactElement)
+  >;
   className?: string;
   disablePadding?: boolean;
   header?: ReactElement | ((params: Parameters) => ReactElement);
@@ -139,15 +141,10 @@ const Item = ({
                       !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

@@ -35,6 +35,7 @@ interface UseMetricsQueryProps {
     timePeriodType: number;
   };
   isEnabled?: boolean;
+  enforceIsEnabled?: boolean;
 }
 
 interface UseMetricsQueryState {
@@ -101,7 +102,8 @@ const useGraphQuery = ({
   refreshCount,
   bypassQueryParams = false,
   prefix,
-  isEnabled = true
+  isEnabled = true,
+  enforceIsEnabled
 }: UseMetricsQueryProps): UseMetricsQueryState => {
   const timePeriodToUse = equals(timePeriod?.timePeriodType, -1)
     ? {
@@ -159,9 +161,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

@@ -32,10 +32,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);