Don't display facts until facts are loaded

awx/ui_next/src/screens/Inventory/InventoryHostFacts/InventoryHostFacts.jsx

@@ -11,32 +11,31 @@ import useRequest from '../../../util/useRequest';
 import { HostsAPI } from '../../../api';
 
 function InventoryHostFacts({ i18n, host }) {
-  const { result: facts, isLoading, error, request: fetchFacts } = useRequest(
+  const { request, isLoading, error, result } = useRequest(
     useCallback(async () => {
-      const [{ data: factsObj }] = await Promise.all([
+      const { data } = await HostsAPI.readFacts(host.id);
-        HostsAPI.readFacts(host.id),
+
-      ]);
+      return JSON.stringify(data, null, 4);
-      return JSON.stringify(factsObj, null, 4);
     }, [host]),
-    '{}'
+    null
   );
 
   useEffect(() => {
-    fetchFacts();
+    request();
-  }, [fetchFacts]);
+  }, [request]);
-
-  if (isLoading) {
-    return <ContentLoading />;
-  }
 
   if (error) {
     return <ContentError error={error} />;
   }
 
+  if (isLoading || result === null) {
+    return <ContentLoading />;
+  }
+
   return (
     <CardBody>
       <DetailList gutter="sm">
-        <VariablesDetail label={i18n._(t`Facts`)} fullHeight value={facts} />
+        <VariablesDetail label={i18n._(t`Facts`)} fullHeight value={result} />
       </DetailList>
     </CardBody>
   );