fix(kube): improve dashboard load speed [EE-4941] (#8572)

* apply changes from EE

* clear query cache when logging out

* Text transitions in smoother

app/react/components/DashboardItem/DashboardGrid.css

@@ -1,3 +0,0 @@
-.dashboard-grid {
-  @apply grid grid-cols-2 gap-3;
-}

app/react/components/DashboardItem/DashboardGrid.tsx

@@ -1,7 +1,5 @@
 import { PropsWithChildren } from 'react';
 
-import './DashboardGrid.css';
-
 export function DashboardGrid({ children }: PropsWithChildren<unknown>) {
-  return <div className="dashboard-grid">{children}</div>;
+  return <div className="grid grid-cols-2 gap-3">{children}</div>;
 }

app/react/components/DashboardItem/DashboardItem.tsx

@@ -1,25 +1,62 @@
 import { ReactNode } from 'react';
 import clsx from 'clsx';
+import { Loader2 } from 'lucide-react';
 
 import { Icon, IconProps } from '@/react/components/Icon';
 import { pluralize } from '@/portainer/helpers/strings';
 
+import { Link } from '@@/Link';
+
 interface Props extends IconProps {
-  value?: number;
   type: string;
+  pluralType?: string; // in case the pluralise function isn't suitable
+  isLoading?: boolean;
+  isRefetching?: boolean;
+  value?: number;
+  to?: string;
   children?: ReactNode;
+  dataCy?: string;
 }
 
-export function DashboardItem({ value, icon, type, children }: Props) {
-  return (
+export function DashboardItem({
+  icon,
+  type,
+  pluralType,
+  isLoading,
+  isRefetching,
+  value,
+  to,
+  children,
+  dataCy,
+}: Props) {
+  const Item = (
     <div
       className={clsx(
-        'rounded-lg border border-solid p-3',
+        'relative rounded-lg border border-solid p-3',
         'border-gray-5 bg-gray-2 hover:border-blue-7 hover:bg-blue-2',
         'th-dark:border-gray-neutral-8 th-dark:bg-gray-iron-10 th-dark:hover:border-blue-8 th-dark:hover:bg-gray-10',
         'th-highcontrast:border-white th-highcontrast:bg-black th-highcontrast:hover:border-blue-8 th-highcontrast:hover:bg-gray-11'
       )}
+      data-cy={dataCy}
     >
+      <div
+        className={clsx(
+          'text-muted absolute top-2 right-2 flex items-center transition-opacity',
+          isRefetching ? 'opacity-100' : 'opacity-0'
+        )}
+      >
+        Refreshing total
+        <Loader2 className="h-4 animate-spin-slow" />
+      </div>
+      <div
+        className={clsx(
+          'text-muted absolute top-2 right-2 flex items-center transition-opacity',
+          isLoading ? 'opacity-100' : 'opacity-0'
+        )}
+      >
+        Loading total
+        <Loader2 className="h-4 animate-spin-slow" />
+      </div>
       <div className="flex items-center" aria-label={type}>
         <div
           className={clsx(
@@ -42,7 +79,7 @@ export function DashboardItem({ value, icon, type, children }: Props) {
             )}
             aria-label="value"
           >
-            {typeof value !== 'undefined' ? value : '-'}
+            {typeof value === 'undefined' ? '-' : value}
           </div>
           <div
             className={clsx(
@@ -53,7 +90,7 @@ export function DashboardItem({ value, icon, type, children }: Props) {
             )}
             aria-label="resourceType"
           >
-            {pluralize(value || 0, type)}
+            {pluralize(value || 0, type, pluralType)}
           </div>
         </div>
 
@@ -61,4 +98,13 @@ export function DashboardItem({ value, icon, type, children }: Props) {
       </div>
     </div>
   );
+
+  if (to) {
+    return (
+      <Link to={to} className="!no-underline">
+        {Item}
+      </Link>
+    );
+  }
+  return Item;
 }