1 files changed, 21 insertions, 18 deletions
diff --git a/src/lib/content/components/PageContent.jsx b/src/lib/content/components/PageContent.jsx
index 724f99c1..60116698 100644
--- a/src/lib/content/components/PageContent.jsx
+++ b/src/lib/content/components/PageContent.jsx
@@ -1,26 +1,29 @@
-import { useEffect } from 'react'
-import { useState } from 'react'
 import pageContentApi from '../api/pageContentApi'
+import { useQuery } from 'react-query'
+import Spinner from '@/core/components/elements/Spinner/Spinner'
 
 const PageContent = ({ path }) => {
-  const [content, setContent] = useState(<></>)
+  const fetchContent = async () => await pageContentApi({ path })
+  const content = useQuery(`content-${path}`, fetchContent)
 
-  useEffect(() => {
-    const loadContent = async () => {
-      const dataContent = await pageContentApi({ path })
-      if (dataContent) {
-        setContent(
-          <div
-            className='p-4 prose prose-gray prose-a:text-red_r-10 prose-p:my-0'
-            dangerouslySetInnerHTML={{ __html: dataContent.content }}
-          />
-        )
-      }
-    }
-    loadContent()
-  }, [path])
+  if (content.data) {
+    return (
+      <div
+        className='p-4 prose prose-gray prose-a:text-red_r-10 prose-p:my-0'
+        dangerouslySetInnerHTML={{ __html: dataContent.content }}
+      />
+    )
+  }
 
-  return content
+  if (content.isLoading) {
+    return (
+      <div className='flex justify-center my-6'>
+        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
+      </div>
+    )
+  }
+
+  return <></>
 }
 
 export default PageContent