feat(ExplainResult): add visualization for simplified query plan (#1061)

Author: Raubzeug

package-lock.json

@@ -52,7 +52,9 @@
     "use-query-params": "^2.2.1",
     "web-vitals": "^1.1.2",
     "ydb-ui-components": "^4.2.0",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "@gravity-ui/table": "^0.5.0",
+    "@tanstack/react-table": "^8.19.3"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",

package.json

@@ -2,17 +2,23 @@ import type {LoaderSize} from '@gravity-ui/uikit';
 import {Loader as KitLoader} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
+import {useDelayed} from '../../utils/hooks/useDelayed';
 
 import './Loader.scss';
 
 const b = cn('ydb-loader');
 
 interface LoaderProps {
     size?: LoaderSize;
+    delay?: number;
     className?: string;
 }
 
-export const Loader = ({size = 'm', className}: LoaderProps) => {
+export const Loader = ({size = 'm', delay = 600, className}: LoaderProps) => {
+    const show = useDelayed(delay);
+    if (!show) {
+        return null;
+    }
     return (
         <div className={b(null, className)}>
             <KitLoader size={size} />

src/components/Loader/Loader.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import type {LoaderSize} from '@gravity-ui/uikit';
+
+import {Loader} from '../Loader/Loader';
+
+interface LoaderWrapperProps {
+    loading?: boolean;
+    size?: LoaderSize;
+    className?: string;
+    children: React.ReactNode;
+}
+
+export function LoaderWrapper({loading, size = 'm', className, children}: LoaderWrapperProps) {
+    if (loading) {
+        return <Loader size={size} className={className} />;
+    }
+    return children;
+}