Registration Refresh

- Toss component in Suspense boundary
PelicanPlatform · Dec 10, 2024 · f0f2cc9 · f0f2cc9
1 parent 25d245b
commit f0f2cc9
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/web_ui/frontend/app/origin/page.tsx b/web_ui/frontend/app/origin/page.tsx
@@ -18,8 +18,8 @@
 
 'use client';
 
-import { useState } from 'react';
-import { Box, IconButton, Grid, Tooltip, Typography } from '@mui/material';
+import { useState, Suspense } from 'react';
+import { Box, IconButton, Grid, Tooltip, Typography, Skeleton } from '@mui/material';
 import { Key, CheckCircle } from '@mui/icons-material';
 
 import RateGraph from '@/components/graphs/RateGraph';
@@ -85,7 +85,9 @@ export default function Home() {
                 )}
               </Tooltip>
             </Box>
-            <DataExportTable />
+            <Suspense fallback={<Skeleton/>}>
+              <DataExportTable />
+            </Suspense>
           </Grid>
           <Grid item xs={12} lg={6}>
             <Box

diff --git a/web_ui/frontend/components/DataExportTable.tsx b/web_ui/frontend/components/DataExportTable.tsx
@@ -22,7 +22,6 @@ import useSWR from 'swr';
 import { getErrorMessage } from '@/helpers/util';
 import { Capabilities } from '@/types';
 import { CapabilitiesDisplay } from '@/components';
-import CircularProgress from '@mui/material/CircularProgress';
 import { useSearchParams } from 'next/navigation';
 
 type RegistrationStatus =
@@ -368,10 +367,14 @@ const generateEditUrl = (editUrl: string, fromUrl: string) => {
 }
 
 export const DataExportTable = ({ boxProps }: { boxProps?: BoxProps }) => {
+
+  const searchParams = useSearchParams()
+  const from_registry = searchParams.get('from_registry') == 'true'
+
   const [pending, setPending] = useState<boolean>(false);
   const [ fromUrl, setFromUrl ] = useState<string | undefined>(undefined);
   const { data, mutate } = useSWR('getDataExport', getExportData, {
-    refreshInterval: 10000
+    refreshInterval: from_registry ? 10000 : 0,
   });
 
   useEffect(() => {
@@ -380,12 +383,9 @@ export const DataExportTable = ({ boxProps }: { boxProps?: BoxProps }) => {
     setTimeout(() => {
       mutate()
       setPending(false);
-    }, 5000);
+    }, 10000);
   }, []);
 
-  const searchParams = useSearchParams()
-  const from_registry = searchParams.get('from_registry') == 'true'
-
   const dataEnhanced = useMemo(() => {
 
     // If no from URL return current data