update 25/03

2025-03-25 14:18:53 +07:00
parent 27057c8588
commit cc8b18bbc9
2 changed files with 273 additions and 168 deletions
--- a/src/app/job/[slug]/page.tsx
+++ b/src/app/job/[slug]/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { useState, useEffect } from "react";
+import { Suspense, useState, useEffect } from "react";
 import { useParams } from "next/navigation";
 import { JobDetailDataType } from "@/types/job";
 import { fetchJobDetail } from "@/api/apiService";
@@ -8,6 +8,7 @@ const JobDetails = () => {
  const [JobDetail, setJobDetail] = useState<JobDetailDataType | null>(null);
  const [activeTab, setActiveTab] = useState("#info");
  const { slug } = useParams();
+  const [loadingUi, setLoadingUI] = useState(true);

  const showTab = (tab: string) => {
    setActiveTab(tab);
@@ -18,6 +19,7 @@ const JobDetails = () => {
      const getJobDetail = async () => {
        const data = await fetchJobDetail(slug);
        setJobDetail(data[0]);
+        setLoadingUI(false);
      };
      getJobDetail();
    }
@@ -25,6 +27,45 @@ const JobDetails = () => {

  return (
    <div className="page-job detail">
+      <Suspense>
+        {loadingUi ? (
+          <div className="container-job">
+            <h2 className="title animate-fade-in text-xl font-medium bg-gray-200 rounded-[12px]"></h2>
+            <div className="content-job flex">
+              <div className="left-job">
+                <div className="item">
+                  <p className="bg-gray-200 h-[20px] block w-full"></p>
+                  <b className="bg-gray-200 h-[20px] block w-full"></b>
+                </div>
+                <div className="item">
+                  <p className="bg-gray-200 h-[20px] block w-full"></p>
+                  <b className="bg-gray-200 h-[20px] block w-full"></b>
+                </div>
+                <div className="item">
+                  <p className="bg-gray-200 h-[20px] block w-full"></p>
+                  <b className="bg-gray-200 h-[20px] block w-full"></b>
+                </div>
+              </div>
+              <div className="right-job">
+                <div className="list-tab flex items-center">
+                  <div className="item-tab bg-gray-200 w-[170px] h-[45px] mr-[12px] rounded-[5px]"></div>
+                  <div className="item-tab bg-gray-200 w-[170px] h-[45px] mr-[12px] rounded-[5px]"></div>
+                </div>
+                <div>
+                  <div className="bg-gray-200 w-full h-[30px] rounded-[5px] ml-[20px] mb-[20px]"></div>
+                  <ul>
+                    <li className="bg-gray-200 w-full h-[20px] rounded-[5px] mb-[10px] ml-[10px]"></li>
+                    <li className="bg-gray-200 w-full h-[20px] rounded-[5px] mb-[10px] ml-[10px]"></li>
+                    <li className="bg-gray-200 w-full h-[20px] rounded-[5px] mb-[10px] ml-[10px]"></li>
+                    <li className="bg-gray-200 w-full h-[20px] rounded-[5px] mb-[10px] ml-[10px]"></li>
+                    <li className="bg-gray-200 w-full h-[20px] rounded-[5px] mb-[10px] ml-[10px]"></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div>
            {JobDetail ? (
              <div className="container-job">
                <h2 className="title">{JobDetail.title}</h2>
@@ -71,7 +112,9 @@ const JobDetails = () => {
                      id="info"
                    >
                      <div
-                  dangerouslySetInnerHTML={{ __html: JobDetail.description }}
+                        dangerouslySetInnerHTML={{
+                          __html: JobDetail.description,
+                        }}
                      />
                      <a
                        href="javascript:void(0)"
@@ -95,12 +138,16 @@ const JobDetails = () => {
                            <p className="name-up">Tải lên sơ yếu lý lịch</p>
                          </div>
                          <p className="gray">
-                      Tải sơ yếu lý lịch của bạn lên đây để tự động điền các
-                      thông tin chính.
+                            Tải sơ yếu lý lịch của bạn lên đây để tự động điền
+                            các thông tin chính.
                          </p>
                        </div>
                        <div className="upload-right">
-                    <input id="js-file-upload-id" type="hidden" value="" />
+                          <input
+                            id="js-file-upload-id"
+                            type="hidden"
+                            value=""
+                          />
                          <div id="js-container-selector">
                            <a
                              id="js-select-file"
@@ -158,9 +205,9 @@ const JobDetails = () => {
                      <div className="item-form">
                        <label>Thông tin bổ sung</label>
                        <span className="ghichu">
-                    Vui lòng chia sẻ bất kỳ điều gì khác bạn muốn chúng tôi
-                    biết, chẳng hạn như động lực của bạn khi ứng tuyển hoặc các
-                    bối cảnh bổ sung liên quan đến hồ sơ của bạn.
+                          Vui lòng chia sẻ bất kỳ điều gì khác bạn muốn chúng
+                          tôi biết, chẳng hạn như động lực của bạn khi ứng tuyển
+                          hoặc các bối cảnh bổ sung liên quan đến hồ sơ của bạn.
                        </span>
                        <textarea
                          className="input-item"
@@ -184,6 +231,9 @@ const JobDetails = () => {
              </div>
            )}
          </div>
+        )}
+      </Suspense>
+    </div>
  );
 };

--- a/src/app/job/page.tsx
+++ b/src/app/job/page.tsx
@@ -1,16 +1,18 @@
 "use client";
 import Link from "next/link";
-import { useState, useEffect } from "react";
+import { Suspense, useState, useEffect } from "react";
 import { ListJobDataType } from "@/types/job";
 import { fetchListJobs } from "@/api/apiService";

 const HomeJob = () => {
  const [ListJob, setListJob] = useState<ListJobDataType | null>(null);
+  const [loadingUi, setLoadingUI] = useState(true);

  useEffect(() => {
    const getListJob = async () => {
      const data = await fetchListJobs();
      setListJob(data.list);
+      setLoadingUI(false);
    };

    getListJob();
@@ -20,12 +22,61 @@ const HomeJob = () => {
    <div className="page-job list">
      <div className="container-job">
        <h2 className="title">Tuyển dụng</h2>
+        <Suspense>
+          {loadingUi ? (
+            <div className="list-job">
+              <div className="item-job">
+                <div className="job-left flex items-center">
+                  <div className="name line-clamp-1 bg-gray-200 h-[21px] w-[300px] mr-[15px]"></div>
+                  <div className="time bg-gray-200 h-[20px] w-[120px] block"></div>
+                </div>
+                <div className="job-right flex items-center">
+                  <div className="localhost bg-gray-200 h-[21px] w-[60px] mr-[20px] block"></div>
+                  <div className="more bg-gray-200 h-[21px] block w-[120px]"></div>
+                </div>
+              </div>
+              <div className="item-job">
+                <div className="job-left flex items-center">
+                  <div className="name line-clamp-1 bg-gray-200 h-[21px] w-[300px] mr-[15px]"></div>
+                  <div className="time bg-gray-200 h-[20px] w-[120px] block"></div>
+                </div>
+                <div className="job-right flex items-center">
+                  <div className="localhost bg-gray-200 h-[21px] w-[60px] mr-[20px] block"></div>
+                  <div className="more bg-gray-200 h-[21px] block w-[120px]"></div>
+                </div>
+              </div>
+              <div className="item-job">
+                <div className="job-left flex items-center">
+                  <div className="name line-clamp-1 bg-gray-200 h-[21px] w-[300px] mr-[15px]"></div>
+                  <div className="time bg-gray-200 h-[20px] w-[120px] block"></div>
+                </div>
+                <div className="job-right flex items-center">
+                  <div className="localhost bg-gray-200 h-[21px] w-[60px] mr-[20px] block"></div>
+                  <div className="more bg-gray-200 h-[21px] block w-[120px]"></div>
+                </div>
+              </div>
+              <div className="item-job">
+                <div className="job-left flex items-center">
+                  <div className="name line-clamp-1 bg-gray-200 h-[21px] w-[300px] mr-[15px]"></div>
+                  <div className="time bg-gray-200 h-[20px] w-[120px] block"></div>
+                </div>
+                <div className="job-right flex items-center">
+                  <div className="localhost bg-gray-200 h-[21px] w-[60px] mr-[20px] block"></div>
+                  <div className="more bg-gray-200 h-[21px] block w-[120px]"></div>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div>
              {ListJob && Array.isArray(ListJob) && ListJob.length > 0 ? (
                <div className="list-job">
                  {ListJob.map((item) => (
                    <div className="item-job" key={item.id}>
                      <div className="job-left">
-                  <Link href={`${item.url}`} className="name line-clamp-1">
+                        <Link
+                          href={`${item.url}`}
+                          className="name line-clamp-1"
+                        >
                          {item.title}
                        </Link>
                        <div className="time">{item.end_date}</div>
@@ -33,7 +84,8 @@ const HomeJob = () => {
                      <div className="job-right flex items-center">
                        <div className="localhost">{item.location}</div>
                        <Link href={`${item.url}`} className="more">
-                    Ứng tuyển ngay <i className="fa-solid fa-angle-right"></i>
+                          Ứng tuyển ngay{" "}
+                          <i className="fa-solid fa-angle-right"></i>
                        </Link>
                      </div>
                    </div>
@@ -45,6 +97,9 @@ const HomeJob = () => {
                </div>
              )}
            </div>
+          )}
+        </Suspense>
+      </div>
    </div>
  );
 };