Skip to content

feat: added lazy and suspense with skeleton on various folders #111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

feat: added lazy and suspense with skeleton on various folders #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b1986a2
updated faq for lazyAndSuspense
Shivam107 Oct 17, 2025
cb476f1
orignal yaml files
Shivam107 Oct 18, 2025
3583541
Update prisma and @prisma/client versions
Shivam107 Oct 18, 2025
9986690
Modify Account table structure in migration.sql
Shivam107 Oct 18, 2025
e2166cf
Delete apps/api/prisma/migrations/migration_lock.toml
Shivam107 Oct 18, 2025
2b2fd03
Delete apps/api/prisma/migrations/20251014050423_init/migration.sql
Shivam107 Oct 18, 2025
6dc8a40
fix: remove dashboard skeleton fallbacks
Shivam107 Oct 24, 2025
d4f67b3
Merge branch 'apsinghdev:main' into fix/lazyAndSuspense
Shivam107 Oct 24, 2025
9044df4
Merge branch 'main' into fix/lazyAndSuspense
Shivam107 Nov 4, 2025
ba27938
Merge branch 'main' into fix/lazyAndSuspense
Shivam107 Nov 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 29 additions & 11 deletions apps/web/src/app/(main)/(landing)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,31 @@
import Navbar from '@/components/landing-sections/navbar'
import React from 'react'
"use client";

import React, { Suspense, lazy } from "react";

import { Skeleton } from "@/components/ui/skeleton";

const Navbar = lazy(() => import("@/components/landing-sections/navbar"));

const Layout = ({ children }: { children: React.ReactNode }) => {
return (
<section>
<Navbar />
{children}
</section>
)
}

export default Layout
return (
<section>
<Suspense
fallback={
<div className="py-20 text-center text-lg text-neutral-400">
<div className="mx-auto flex w-full max-w-md flex-col items-center gap-4 px-6">
<Skeleton className="h-6 w-40" />
<Skeleton className="h-4 w-72" />
<Skeleton className="h-4 w-64" />
<Skeleton className="h-4 w-56" />
</div>
</div>
}
>
<Navbar />
</Suspense>
{children}
</section>
);
};

export default Layout;
177 changes: 155 additions & 22 deletions apps/web/src/app/(main)/(landing)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,166 @@
'use client'
import Bento from '@/components/landing-sections/Bento'
import Brands from '@/components/landing-sections/Brands'
import CTA from '@/components/landing-sections/CTA'
import Footer from '@/components/landing-sections/footer'
import Hero from '@/components/landing-sections/Hero'
import HowItWorks from '@/components/landing-sections/how-it-works'
import Navbar from '@/components/landing-sections/navbar'
import Testimonials from '@/components/landing-sections/testimonials'
import Video from '@/components/landing-sections/video'
import React from 'react'
import { FaqSection } from '@/components/faq/FaqSection'
import React, { Suspense, lazy } from 'react'

import { Skeleton } from "@/components/ui/skeleton";

const Navbar = lazy(() => import('@/components/landing-sections/navbar'))
const Hero = lazy(() => import('@/components/landing-sections/Hero'))
const Bento = lazy(() => import('@/components/landing-sections/Bento'))
const Video = lazy(() => import('@/components/landing-sections/video'))
const HowItWorks = lazy(() => import('@/components/landing-sections/how-it-works'))
const Brands = lazy(() => import('@/components/landing-sections/Brands'))
const Testimonials = lazy(() => import('@/components/landing-sections/testimonials'))
const FaqSection = lazy(() => import('@/components/faq/FaqSection'))
const CTA = lazy(() => import('@/components/landing-sections/CTA'))
const Footer = lazy(() => import('@/components/landing-sections/footer'))


const Landing = () => {
return (
<main className='min-h-screen w-full bg-[#101010] text-white font-sans overflow-hidden relative'>
<Navbar />
<div className="min-h-screen w-full max-w-[2000px] mx-auto border-x border-[#252525] overflow-hidden">
<Hero />
<Bento />
<Video />
<HowItWorks />
<FaqSection />
<Brands />
<Testimonials />
<Suspense
fallback={
<div className="py-20 text-center text-lg text-neutral-400">
<div className="mx-auto flex w-full max-w-md flex-col items-center gap-4 px-6">
<Skeleton className="h-6 w-40" />
<Skeleton className="h-4 w-72" />
<Skeleton className="h-4 w-64" />
<Skeleton className="h-4 w-56" />
</div>
</div>
}
>
<Navbar />
</Suspense>
<div className="min-h-screen w-full max-w-[2000px] mx-auto border-x border-[#252525] overflow-hidden">
<Suspense
fallback={
<div className="py-20 text-center text-lg text-neutral-400">
<div className="mx-auto flex w-full max-w-md flex-col items-center gap-4 px-6">
<Skeleton className="h-6 w-40" />
<Skeleton className="h-4 w-72" />
<Skeleton className="h-4 w-64" />
<Skeleton className="h-4 w-56" />
</div>
</div>
}
>
<Hero />
</Suspense>
<Suspense
fallback={
<div className="py-20 text-center text-lg text-neutral-400">
<div className="mx-auto flex w-full max-w-md flex-col items-center gap-4 px-6">
<Skeleton className="h-6 w-40" />
<Skeleton className="h-4 w-72" />
<Skeleton className="h-4 w-64" />
<Skeleton className="h-4 w-56" />
</div>
</div>
}
>
<Bento />
</Suspense>
<Suspense
fallback={
<div className="py-20 text-center text-lg text-neutral-400">
<div className="mx-auto flex w-full max-w-md flex-col items-center gap-4 px-6">
<Skeleton className="h-6 w-40" />
<Skeleton className="h-4 w-72" />
<Skeleton className="h-4 w-64" />
<Skeleton className="h-4 w-56" />
</div>
</div>
}
>
<Video />
</Suspense>
<Suspense
fallback={
<div className="py-20 text-center text-lg text-neutral-400">
<div className="mx-auto flex w-full max-w-md flex-col items-center gap-4 px-6">
<Skeleton className="h-6 w-40" />
<Skeleton className="h-4 w-72" />
<Skeleton className="h-4 w-64" />
<Skeleton className="h-4 w-56" />
</div>
</div>
}
>
<HowItWorks />
</Suspense>
<Suspense
fallback={
<div className="py-20 text-center text-lg text-neutral-400">
<div className="mx-auto flex w-full max-w-md flex-col items-center gap-4 px-6">
<Skeleton className="h-6 w-40" />
<Skeleton className="h-4 w-72" />
<Skeleton className="h-4 w-64" />
<Skeleton className="h-4 w-56" />
</div>
</div>
}
>
<Brands />
</Suspense>
<Suspense
fallback={
<div className="py-20 text-center text-lg text-neutral-400">
<div className="mx-auto flex w-full max-w-md flex-col items-center gap-4 px-6">
<Skeleton className="h-6 w-40" />
<Skeleton className="h-4 w-72" />
<Skeleton className="h-4 w-64" />
<Skeleton className="h-4 w-56" />
</div>
</div>
}
>
<Testimonials />
</Suspense>
<Suspense
fallback={
<div className="py-20 text-center text-lg text-neutral-400">
<div className="mx-auto flex w-full max-w-md flex-col items-center gap-4 px-6">
<Skeleton className="h-6 w-40" />
<Skeleton className="h-4 w-72" />
<Skeleton className="h-4 w-64" />
<Skeleton className="h-4 w-56" />
</div>
</div>
}
>
<FaqSection />
</Suspense>
</div>
<div className="max-w-[2000px] w-full mx-auto">
<CTA />
<Footer />
<Suspense
fallback={
<div className="py-20 text-center text-lg text-neutral-400">
<div className="mx-auto flex w-full max-w-md flex-col items-center gap-4 px-6">
<Skeleton className="h-6 w-40" />
<Skeleton className="h-4 w-72" />
<Skeleton className="h-4 w-64" />
<Skeleton className="h-4 w-56" />
</div>
</div>
}
>
<CTA />
</Suspense>
<Suspense
fallback={
<div className="py-20 text-center text-lg text-neutral-400">
<div className="mx-auto flex w-full max-w-md flex-col items-center gap-4 px-6">
<Skeleton className="h-6 w-40" />
<Skeleton className="h-4 w-72" />
<Skeleton className="h-4 w-64" />
<Skeleton className="h-4 w-56" />
</div>
</div>
}
>
<Footer />
</Suspense>
</div>
</main >
)
Expand Down
Loading