diff options
| -rw-r--r-- | src/pages/blog/[slug].jsx | 35 |
1 files changed, 22 insertions, 13 deletions
diff --git a/src/pages/blog/[slug].jsx b/src/pages/blog/[slug].jsx index 63e53bf0..b85a83d2 100644 --- a/src/pages/blog/[slug].jsx +++ b/src/pages/blog/[slug].jsx @@ -1,4 +1,5 @@ import Link from '@/core/components/elements/Link/Link' +import Spinner from '@/core/components/elements/Spinner/Spinner' import BasicLayout from '@/core/components/layouts/BasicLayout' import { createSlug, getIdFromSlug } from '@/core/utils/slug' import useBlog from '@/lib/blog/hooks/useBlog' @@ -35,20 +36,28 @@ export default function BlogDetail() { return ( <BasicLayout> - <div className='container mx-auto p-4 md:p-0 my-0 md:my-10'> - <h1 className='text-title-sm md:text-title-md font-semibold mb-2 leading-10'> - {blog.data?.title} - </h1> - <h2 className='leading-6 text-gray_r-12/90 mb-8'> - Diposting pada tanggal {blog.data?.postDate}{' '} - {blog.data?.category?.id && `di ${blog.data?.category?.name}`} - </h2> + {blog.isLoading && ( + <div className='flex justify-center my-6'> + <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' /> + </div> + )} - <article - className={contentClassNames} - dangerouslySetInnerHTML={{ __html: parsedContent }} - /> - </div> + {blog.isFetched && ( + <div className='container mx-auto p-4 md:p-0 my-0 md:my-10'> + <h1 className='text-title-sm md:text-title-md font-semibold mb-2 leading-10'> + {blog.data?.title} + </h1> + <h2 className='leading-6 text-gray_r-12/90 mb-8'> + Diposting pada tanggal {blog.data?.postDate}{' '} + {blog.data?.category?.id && `di ${blog.data?.category?.name}`} + </h2> + + <article + className={contentClassNames} + dangerouslySetInnerHTML={{ __html: parsedContent }} + /> + </div> + )} </BasicLayout> ) } |