From df3947aaa8abc972652e1da3f52c920aafcadff7 Mon Sep 17 00:00:00 2001
From: Joe Bottigliero <694253+jbottigliero@users.noreply.github.com>
Date: Tue, 16 Apr 2024 16:02:04 -0500
Subject: [PATCH] fix: clean-up result page rendering

---
 src/app/results/page.tsx  | 25 +++++++++----------
 src/components/Result.tsx | 52 +++++++++------------------------------
 2 files changed, 23 insertions(+), 54 deletions(-)

diff --git a/src/app/results/page.tsx b/src/app/results/page.tsx
index 1f2ad52..b7d4471 100644
--- a/src/app/results/page.tsx
+++ b/src/app/results/page.tsx
@@ -20,14 +20,10 @@ import { search } from "@globus/sdk";
 
 import { GMetaResult } from "../page";
 
-export default function ResultPage() {
-  const router = useRouter();
+const ClientSideResult = () => {
   const params = useSearchParams();
   const subject = params.get("subject");
-
   const [result, setResult] = useState<GMetaResult>();
-  const [isLoading, setIsLoading] = useState(true);
-
   useEffect(() => {
     async function fetchResult() {
       const response = await (
@@ -37,15 +33,24 @@ export default function ResultPage() {
           },
         })
       ).json();
-      setIsLoading(false);
       setResult(response);
     }
 
     fetchResult();
   }, [subject]);
+  return <Result result={result} />;
+};
 
+export default function ResultPage() {
+  const router = useRouter();
   return (
     <Container maxW="container.xl" p={4}>
+      <Link onClick={() => router.back()}>
+        <Flex alignItems="center" mb={4}>
+          <ChevronLeftIcon /> <Text fontSize="sm">Back</Text>
+        </Flex>
+      </Link>
+      <Divider my={2} />
       <Suspense
         fallback={
           <Center>
@@ -59,13 +64,7 @@ export default function ResultPage() {
           </Center>
         }
       >
-        <Link onClick={() => router.back()}>
-          <Flex alignItems="center" mb={4}>
-            <ChevronLeftIcon /> <Text fontSize="sm">Back</Text>
-          </Flex>
-        </Link>
-        <Divider my={2} />
-        <Result result={result} isLoading={isLoading} />
+        <ClientSideResult />
       </Suspense>
     </Container>
   );
diff --git a/src/components/Result.tsx b/src/components/Result.tsx
index 2b73748..4e32156 100644
--- a/src/components/Result.tsx
+++ b/src/components/Result.tsx
@@ -15,12 +15,9 @@ import {
   DrawerCloseButton,
   useDisclosure,
   Divider,
-  Skeleton,
   AlertIcon,
   AlertTitle,
   AlertDescription,
-  Spinner,
-  Center,
   Alert,
 } from "@chakra-ui/react";
 import { getAttribute, getAttributeFrom } from "../../static";
@@ -89,11 +86,9 @@ const FieldValue = ({ value }: { value: unknown }) => {
 const Field = ({
   field,
   gmeta,
-  isLoading,
 }: {
   field: FieldDefinition;
   gmeta: GMetaResult;
-  isLoading: boolean;
 }) => {
   const processedField =
     typeof field === "string" ? { label: undefined, property: field } : field;
@@ -108,34 +103,15 @@ const Field = ({
           {processedField.label}
         </Heading>
       )}
-      <Skeleton isLoaded={!isLoading}>
-        <FieldValue value={value} />
-      </Skeleton>
+      <FieldValue value={value} />
     </Box>
   );
 };
 
-export default function Result({
-  result,
-  isLoading,
-}: {
-  result?: GMetaResult | GError;
-  isLoading: boolean;
-}) {
+export default function Result({ result }: { result?: GMetaResult | GError }) {
   if (!result) {
-    return (
-      <Center>
-        <Spinner
-          thickness="4px"
-          speed="0.65s"
-          emptyColor="gray.200"
-          color="blue.500"
-          size="xl"
-        />
-      </Center>
-    );
+    return null;
   }
-
   if (result["@datatype"] === "GError") {
     return (
       <Alert
@@ -167,11 +143,9 @@ export default function Result({
 
   return (
     <>
-      <Skeleton isLoaded={!isLoading}>
-        <Heading as="h1" size="md" color="brand">
-          {heading}
-        </Heading>
-      </Skeleton>
+      <Heading as="h1" size="md" color="brand">
+        {heading}
+      </Heading>
 
       <Divider my={2} />
 
@@ -182,14 +156,12 @@ export default function Result({
               <Heading as="h2" size="sm" my={2}>
                 Summary
               </Heading>
-              <Skeleton isLoaded={!isLoading}>
-                <Text as="p">{summary}</Text>
-              </Skeleton>
+              <Text as="p">{summary}</Text>
             </Box>
           )}
 
           {fields.map((field: any, i: number) => (
-            <Field key={i} field={field} gmeta={result} isLoading={isLoading} />
+            <Field key={i} field={field} gmeta={result} />
           ))}
 
           {/* 
@@ -265,11 +237,9 @@ export default function Result({
             ))}
           </Box> */}
 
-          {!isLoading && (
-            <ResponseDrawer>
-              <Code as="pre">{JSON.stringify(result, null, 2)}</Code>
-            </ResponseDrawer>
-          )}
+          <ResponseDrawer>
+            <Code as="pre">{JSON.stringify(result, null, 2)}</Code>
+          </ResponseDrawer>
         </Box>
       </Flex>
     </>