fix

1 files changed, 43 insertions, 34 deletions

diff --git a/src/pages/video.jsx b/src/pages/video.jsx
index c2348091..88f460a2 100644
--- a/src/pages/video.jsx
+++ b/src/pages/video.jsx
@@ -1,4 +1,5 @@
 import Pagination from '@/core/components/elements/Pagination/Pagination'
+import Spinner from '@/core/components/elements/Spinner/Spinner'
 import BasicLayout from '@/core/components/layouts/BasicLayout'
 import useVideo from '@/lib/video/hooks/useVideo'
 import { useRouter } from 'next/router'
@@ -14,42 +15,50 @@ export default function Video() {
 
   return (
     <BasicLayout>
-      <div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
-        <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>Kanal Video Indoteknik</h1>
-        <div className='grid grid-cols-1 md:grid-cols-4 gap-6'>
-          {video.data?.videos?.map((video) => (
-            <div className='shadow bg-white rounded' key={video.id}>
-              <iframe
-                src={`https://www.youtube.com/embed/${video.url.match(/v=([^&]*)/)[1]}`}
-                title='YouTube video player'
-                allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
-                allowFullScreen={true}
-                width='100%'
-                height={200}
-                className='rounded'
-              />
-              <div className='p-3'>
-                <a
-                  href='https://www.youtube.com/@indoteknikb2bindustriale-c778'
-                  className='text-red_r-11 mb-2 block'
-                >
-                  {video.channelName}
-                </a>
-                <a href={video.url} className='font-medium leading-6'>
-                  {video.name}
-                </a>
-              </div>
-            </div>
-          ))}
+      {video.isLoading && (
+        <div className='flex justify-center my-6'>
+          <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
         </div>
+      )}
+
+      {video.isFetched && (
+        <div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
+          <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>Kanal Video Indoteknik</h1>
+          <div className='grid grid-cols-1 md:grid-cols-4 gap-6'>
+            {video.data?.videos?.map((video) => (
+              <div className='shadow bg-white rounded' key={video.id}>
+                <iframe
+                  src={`https://www.youtube.com/embed/${video.url.match(/v=([^&]*)/)[1]}`}
+                  title='YouTube video player'
+                  allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+                  allowFullScreen={true}
+                  width='100%'
+                  height={200}
+                  className='rounded'
+                />
+                <div className='p-3'>
+                  <a
+                    href='https://www.youtube.com/@indoteknikb2bindustriale-c778'
+                    className='text-red_r-11 mb-2 block'
+                  >
+                    {video.channelName}
+                  </a>
+                  <a href={video.url} className='font-medium leading-6'>
+                    {video.name}
+                  </a>
+                </div>
+              </div>
+            ))}
+          </div>
 
-        <Pagination
-          currentPage={parseInt(page)}
-          pageCount={pageCount}
-          url={`/video`}
-          className='mt-4 md:mt-10'
-        />
-      </div>
+          <Pagination
+            currentPage={parseInt(page)}
+            pageCount={pageCount}
+            url={`/video`}
+            className='mt-4 md:mt-10'
+          />
+        </div>
+      )}
     </BasicLayout>
   )
 }