fix loading

Signed-off-by: Max Wolfs <[email protected]>

src/components/ArchitecturalModel.tsx

@@ -23,17 +23,40 @@ const ArchitecturalModel: React.FunctionComponent<ArchitecturalModelProps> = ({
   jsonFilePath
 }) => {
   const [data, setData] = useState<ArchitecturalLayerData | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
 
   useEffect(() => {
-    fetch(jsonFilePath) // Use the jsonFilePath prop
-      .then((response) => response.json())
-      .then((data: ArchitecturalLayerData) => setData(data))
-      .catch((error) => console.error('Error fetching data:', error))
-  }, [jsonFilePath]) // Dependency array includes jsonFilePath
+    const fetchData = async () => {
+      try {
+        const response = await fetch(jsonFilePath)
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`)
+        }
+        const data = (await response.json()) as ArchitecturalLayerData
+        setData(data)
+      } catch (err) {
+        setError(err.message)
+      } finally {
+        setIsLoading(false)
+      }
+    }
 
-  if (!data) {
+    fetchData()
+  }, [jsonFilePath])
+
+  if (isLoading) {
     return <div>Loading...</div>
   }
+
+  if (error) {
+    return <div>Error: {error}</div>
+  }
+
+  if (!data) {
+    return <div>No data available.</div>
+  }
+
   return (
     <div className={`${styles.gradient} row`}>
       <div className="col col--3">

src/pages/index.tsx

@@ -29,13 +29,23 @@ export default function Home(): JSX.Element {
   const [additionalResources, setAdditionalResources] = useState([])
 
   useEffect(() => {
-    fetch('/data/featureContentData.json')
-      .then((response) => response.json())
-      .then((data) => setFeatureContent(data))
+    const fetchData = async () => {
+      try {
+        const featureResponse = await fetch('/data/featureContentData.json')
+        const featureData = await featureResponse.json()
+        setFeatureContent(featureData)
 
-    fetch('/data/additionalResourcesData.json')
-      .then((response) => response.json())
-      .then((data) => setAdditionalResources(data))
+        const resourcesResponse = await fetch(
+          '/data/additionalResourcesData.json'
+        )
+        const resourcesData = await resourcesResponse.json()
+        setAdditionalResources(resourcesData)
+      } catch (error) {
+        console.error('Error fetching data:', error)
+      }
+    }
+
+    fetchData()
   }, [])
 
   return (