Skip to content

Commit

Permalink
Merge pull request #186 from SpaceyaTech/feat/seo-add-suspense
Browse files Browse the repository at this point in the history 
Feat/seo add suspense
  • Loading branch information
@sonylomo
sonylomo authored Jun 10, 2024
2 parents c982e22 + b379710 commit 3b976b2
Show file tree
Hide file tree
Showing 5 changed files with 192 additions and 89 deletions.
9 changes: 0 additions & 9 deletions sample.env
View file

This file was deleted.

10 changes: 10 additions & 0 deletions src/APP/components/FallbackLoader.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import Loader from "./Loader";

export default function FallbackLoader() {
return (
<div className="flex flex-col items-center justify-center h-[calc(100dvh-62px)] md:h-[calc(100dvh-82px)]">
<Loader />
<span className="text-xl text-primary font-medium">Loading...</span>
</div>
);
}
3 changes: 2 additions & 1 deletion src/APP/components/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export { default as FAQ } from "./FAQ";
export { default as Footer } from "./Footer";
export { default as GoBackBtn } from "./GoBackBtn";
export { default as Header } from "./Header";
export { default as FallbackLoader } from "./FallbackLoader";
export { default as Loader } from "./Loader";
export { default as PodcastCard } from "./PodcastCard";
export { default as LandingWrapper } from "./LandingWrapper";
export { default as LandingWrapper } from "./LandingWrapper";
93 changes: 56 additions & 37 deletions src/APP/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,59 @@
import AboutUs from "./pages/aboutUs/AboutUs";
import AllBlogsPage from "./pages/admin/blogs/AllBlogsPage";
import AddChapterPage from "./pages/admin/chapters/AddChapterPage";
import AllChaptersPage from "./pages/admin/chapters/AllChaptersPage";
import AddEventPage from "./pages/admin/events/AddEventPage";
import AllEventsPage from "./pages/admin/events/AllEventsPage";
import UpdateEventPage from "./pages/admin/events/UpdateEventPage";
import ForgotPassword from "./pages/auth/ForgotPassword";
import LogIn from "./pages/auth/LogIn";
import ResetPassword from "./pages/auth/ResetPassword";
import SignUp from "./pages/auth/SignUp";
import Blog from "./pages/blog/Blog";
import Blog2 from "./pages/blog2/Blog2";
import Blogs from "./pages/blogs/Blogs";
import IndividualChapter from "./pages/chapter/pages/IndividualChapter";
import CommunityPage from "./pages/community/CommunityPage";
// import SingleEvent from "./pages/community/sections/eventsSection/SingleEvents/SingleEvent";
import { SingleEvent } from "./pages/community/sections";
import DonatePage from "./pages/donate/DonatePage";
import SingleProductDonation from "./pages/donate/pages/SingleProductDonatePage";
import Error400 from "./pages/errorPages/Error400";
import Error403 from "./pages/errorPages/Error403";
import Error404 from "./pages/errorPages/Error404";
import Error500 from "./pages/errorPages/Error500";
import ErrorBoundary from "./pages/errorPages/ErrorBoundary";
import EventsPage from "./pages/events/pages/EventsPage";
import EventsSection from "./pages/events/sections/eventsSection/EventsSection";
import GalleryPage from "./pages/gallery/GalleryPage";
import LandingPage from "./pages/landingPage/LandingPage";
import Layout from "./pages/Layout";
import Products from "./pages/products2/Products";
import Resources from "./pages/resources/Resources";
import Homepage from "./pages/shop/Homepage";
import Checkout from "./pages/shop/OrderSummaryPage";
import ProductDisplay from "./pages/shop/ProductDisplayPage";
import CategoriesProducts from "./pages/shop/sections/CategoriesProducts";
import SingleItemPage from "./pages/shop/SingleItemPage";
/* eslint-disable function-paren-newline */
/* eslint-disable implicit-arrow-linebreak */
import { lazy } from "react";

const AboutUs = lazy(() => import("./pages/aboutUs/AboutUs"));
const AllBlogsPage = lazy(() => import("./pages/admin/blogs/AllBlogsPage"));
const AddChapterPage = lazy(() =>
import("./pages/admin/chapters/AddChapterPage")
);
const AllChaptersPage = lazy(() =>
import("./pages/admin/chapters/AllChaptersPage")
);
const AddEventPage = lazy(() => import("./pages/admin/events/AddEventPage"));
const AllEventsPage = lazy(() => import("./pages/admin/events/AllEventsPage"));
const UpdateEventPage = lazy(() =>
import("./pages/admin/events/UpdateEventPage")
);
const ForgotPassword = lazy(() => import("./pages/auth/ForgotPassword"));
const LogIn = lazy(() => import("./pages/auth/LogIn"));
const ResetPassword = lazy(() => import("./pages/auth/ResetPassword"));
const SignUp = lazy(() => import("./pages/auth/SignUp"));
const Blog = lazy(() => import("./pages/blog/Blog"));
const Blog2 = lazy(() => import("./pages/blog2/Blog2"));
const Blogs = lazy(() => import("./pages/blogs/Blogs"));
const IndividualChapter = lazy(() =>
import("./pages/chapter/pages/IndividualChapter")
);
const CommunityPage = lazy(() => import("./pages/community/CommunityPage"));
const SingleEvent = lazy(() =>
import("./pages/community/sections/eventsPreview/SingleEvents/SingleEvent")
);
const DonatePage = lazy(() => import("./pages/donate/DonatePage"));
const SingleProductDonation = lazy(() =>
import("./pages/donate/pages/SingleProductDonatePage")
);
const Error400 = lazy(() => import("./pages/errorPages/Error400"));
const Error403 = lazy(() => import("./pages/errorPages/Error403"));
const Error404 = lazy(() => import("./pages/errorPages/Error404"));
const Error500 = lazy(() => import("./pages/errorPages/Error500"));
const ErrorBoundary = lazy(() => import("./pages/errorPages/ErrorBoundary"));
const EventsPage = lazy(() => import("./pages/events/pages/EventsPage"));
const EventsSection = lazy(() =>
import("./pages/events/sections/eventsSection/EventsSection")
);
const GalleryPage = lazy(() => import("./pages/gallery/GalleryPage"));
const LandingPage = lazy(() => import("./pages/landingPage/LandingPage"));
const Layout = lazy(() => import("./pages/Layout"));
const Products = lazy(() => import("./pages/products2/Products"));
const Resources = lazy(() => import("./pages/resources/Resources"));
const Homepage = lazy(() => import("./pages/shop/Homepage"));
const Checkout = lazy(() => import("./pages/shop/OrderSummaryPage"));
const ProductDisplay = lazy(() => import("./pages/shop/ProductDisplayPage"));
const CategoriesProducts = lazy(() =>
import("./pages/shop/sections/CategoriesProducts")
);
const SingleItemPage = lazy(() => import("./pages/shop/SingleItemPage"));

export {
AddChapterPage,
Expand Down
166 changes: 124 additions & 42 deletions src/router/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import React, { Suspense } from "react";
import { createBrowserRouter } from "react-router-dom";

// Lazy FallbackLoader components
import {
AboutUs,
CommunityPage,
Expand All @@ -26,123 +28,203 @@ import {
Blogs,
EventsPage,
} from "../APP";
import { FallbackLoader } from "../APP/components";

const router = createBrowserRouter([
{
path: "/",
element: <Layout />,
element: (
<Suspense fallback={<FallbackLoader />}>
<Layout />
</Suspense>
),
children: [
{
path: "/",
element: <LandingPage />,
element: (
<Suspense fallback={<FallbackLoader />}>
<LandingPage />
</Suspense>
),
},
{
path: "/products",
element: <Products />,
element: (
<Suspense fallback={<FallbackLoader />}>
<Products />
</Suspense>
),
},
{
path: "/about-us",
element: <AboutUs />,
element: (
<Suspense fallback={<FallbackLoader />}>
<AboutUs />
</Suspense>
),
},
{
path: "/community",
element: <CommunityPage />,
element: (
<Suspense fallback={<FallbackLoader />}>
<CommunityPage />
</Suspense>
),
},
{
path: "/Gallery",
element: <GalleryPage />,
element: (
<Suspense fallback={<FallbackLoader />}>
<GalleryPage />
</Suspense>
),
},
{
path: "/blogs",
element: <Blogs />,
element: (
<Suspense fallback={<FallbackLoader />}>
<Blogs />
</Suspense>
),
},
{
path: "/blogs/:titleSlug",
element: <Blog2 />,
element: (
<Suspense fallback={<FallbackLoader />}>
<Blog2 />
</Suspense>
),
},
{
path: "/events",
element: <EventsPage />,
element: (
<Suspense fallback={<FallbackLoader />}>
<EventsPage />
</Suspense>
),
},
{
path: "/events/:id",
element: <SingleEvent />,
element: (
<Suspense fallback={<FallbackLoader />}>
<SingleEvent />
</Suspense>
),
},
{
path: "/chapter/:id",
element: <IndividualChapter />,
element: (
<Suspense fallback={<FallbackLoader />}>
<IndividualChapter />
</Suspense>
),
},
{
path: "/shop",
element: <Homepage />,
element: (
<Suspense fallback={<FallbackLoader />}>
<Homepage />
</Suspense>
),
},
{
path: "/shop/category/:category",
element: <CategoriesProducts />,
element: (
<Suspense fallback={<FallbackLoader />}>
<CategoriesProducts />
</Suspense>
),
},
{
path: "/shop/item/:id",
element: <ProductDisplay />,
element: (
<Suspense fallback={<FallbackLoader />}>
<ProductDisplay />
</Suspense>
),
},
{
path: "/shop/checkout",
element: <Checkout />,
element: (
<Suspense fallback={<FallbackLoader />}>
<Checkout />
</Suspense>
),
},
{
path: "/resources",
element: <Resources />,
},
// {
// path: "/donate",
// element: <DonatePage />,
// },
// {
// path: "/donate/:id",
// element: <SingleProductDonation />,
// },
// {
// path: "/signup",
// element: <SignUp />,
// },
// {
// path: "/login",
// element: <LogIn />,
// },
element: (
<Suspense fallback={<FallbackLoader />}>
<Resources />
</Suspense>
),
},
{
path: "/login",
element: <LogIn />,
element: (
<Suspense fallback={<FallbackLoader />}>
<LogIn />
</Suspense>
),
},
{
path: "/register",
element: <SignUp />,
element: (
<Suspense fallback={<FallbackLoader />}>
<SignUp />
</Suspense>
),
},
{
path: "/forgot-password",
element: <ForgotPassword />,
element: (
<Suspense fallback={<FallbackLoader />}>
<ForgotPassword />
</Suspense>
),
},
{
path: "/reset-password",
element: <ResetPassword />,
element: (
<Suspense fallback={<FallbackLoader />}>
<ResetPassword />
</Suspense>
),
},
],
},
{
path: "/error-400",
element: <Error400 />,
element: (
<Suspense fallback={<FallbackLoader />}>
<Error400 />
</Suspense>
),
},
{
path: "/error-403",
element: <Error403 />,
element: (
<Suspense fallback={<FallbackLoader />}>
<Error403 />
</Suspense>
),
},
{
path: "/*",
element: <Error404 />,
element: (
<Suspense fallback={<FallbackLoader />}>
<Error404 />
</Suspense>
),
},
{
path: "/error-500",
element: <Error500 />,
element: (
<Suspense fallback={<FallbackLoader />}>
<Error500 />
</Suspense>
),
},

// {
// path: "/admin",
// element: <AdminLayout />,
Expand Down

0 comments on commit 3b976b2

Please sign in to comment.