OwlCyberSecurity - MANAGER

Edit File: loading.tsx

import "@/styles/loading.css";

function Loading() {
  return (
    <div className="animate-pulse font-serif text-lg text-gray-400 text-center p-10 min-h-[80vh]">
      <main className="my-12 flex flex-col gap-10 w-full m-auto loading-max-width">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="grid col-span-2 gap-6">
            <div className="loading-title"></div>
            <div className="flex flex-col md:flex-row gap-[15px] md:h-[450px]">
              <div className="blog-home-page-content">
                <div className="blog-home-page-content-single blog-page loading-fav-img"></div>
                <div className="blog-home-page-content-single blog-page loading-fav-img"></div>
              </div>
              <div className="blog-home-page-content-left">
                <div className="blog-home-page-content-single-big blog-page loading-fav-img2"></div>
              </div>
            </div>
          </div>
          <div className="flex flex-col gap-6">
            <div className="loading-title"></div>
            <div className="selected-blog-content">
              <div className="selected-blog-content-single">
                <div className="loading-select-img"></div>
                <div className="loading-select-title"></div>
              </div>
              <div className="selected-blog-content-single">
                <div className="loading-select-img"></div>
                <div className="loading-select-title"></div>
              </div>
              <div className="selected-blog-content-single">
                <div className="loading-select-img"></div>
                <div className="loading-select-title"></div>
              </div>
              <div className="selected-blog-content-single">
                <div className="loading-select-img"></div>
                <div className="loading-select-title"></div>
              </div>
            </div>
          </div>
        </div>
        <div className="flex flex-col items-center justify-center gap-6">
          <div className="loading-title"></div>
          <div className="grid grid-cols-1 md:grid-cols-4 w-full gap-6 place-items-center">
            <div className="loading-all-blog-content-single"></div>
            <div className="loading-all-blog-content-single"></div>
            <div className="loading-all-blog-content-single"></div>
            <div className="loading-all-blog-content-single"></div>
          </div>
        </div>
      </main>
    </div>
  );
}

export default Loading;