Merge branch 'main' of https://github.com/cnpem/deepsirius-ui

apps/deepsirius-ui/src/components/gallery-views.tsx

@@ -1,6 +1,7 @@
 import { api } from '~/utils/api';
 import { Textarea } from './ui/textarea';
 import { ImageGallery } from './image-gallery';
+import { useDelayedMount } from '~/hooks/use-delayed-mount';
 
 export function ViewRemoteLog({ path }: { path: string }) {
   const { data, error, isLoading, isError } = api.ssh.catTxt.useQuery({
@@ -70,10 +71,13 @@ export function Tensorboard({
       name,
     },
     {
-      refetchInterval: 1000 * 60 * 3,
+      refetchInterval: 1000 * 3,
     },
   );
 
+  // Delayed mount to prevent Bad Gateway error
+  const isMounted = useDelayedMount(2000);
+
   if (isLoading) {
     return <Loading />;
   }
@@ -84,13 +88,19 @@ export function Tensorboard({
   }
 
   return (
-    <iframe src={data.url} className="h-full w-full rounded-lg" />
+    <>
+      {isMounted ? (
+        <iframe src={data.url} className="h-full w-full rounded-lg" />
+      ) : (
+        <Loading />
+      )}
+    </>
   );
 }
 
 function Loading() {
   return (
-    <div className="flex h-full w-3/4 items-center justify-center rounded-lg border border-dashed">
+    <div className="flex h-full w-full items-center justify-center rounded-lg border border-dashed">
       <p className="h-1/2 text-center text-muted-foreground">Loading..</p>
     </div>
   );

apps/deepsirius-ui/src/hooks/use-delayed-mount.tsx

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+
+export const useDelayedMount = (delay: number) => {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setMounted(true);
+    }, delay);
+    return () => clearTimeout(timeout);
+  }, [delay]);
+  return mounted;
+};