fix: builder swiper layout

Author: wackerow

app/[locale]/developers/_components/BuilderSwiper/index.tsx

@@ -24,14 +24,18 @@ const BuilderSwiper = ({ paths, speedRunDetails }: BuilderSwiperProps) => {
   })
 
   return (
-    <Swiper spaceBetween={8} slidesPerView={slidesPerView}>
+    <Swiper
+      spaceBetween={8}
+      slidesPerView={slidesPerView}
+      lazyPreloadPrevNext={1}
+    >
       {paths.map((path, idx) => (
-        <SwiperSlide key={idx} className="first:ms-4 [&:last-child_div]:me-8">
+        <SwiperSlide key={idx} className="first:ms-8">
           <BuilderCard path={path} />
         </SwiperSlide>
       ))}
-      <SwiperSlide className="first:ms-4 [&:last-child_div]:me-8">
-        <SpeedRunCard {...speedRunDetails} />
+      <SwiperSlide>
+        <SpeedRunCard {...speedRunDetails} className="me-16" />
       </SwiperSlide>
     </Swiper>
   )

app/[locale]/developers/_components/BuilderSwiper/loading.tsx

@@ -2,10 +2,12 @@ import { Card } from "@/components/ui/card"
 import { Skeleton, SkeletonLines } from "@/components/ui/skeleton"
 
 const Loading = () => (
-  <Card className="ms-4 w-[85vw] rounded-4xl border bg-background px-2 py-6">
-    <Skeleton className="mx-4 mb-6 size-16 rounded-xl" />
-    <Skeleton className="mx-4 -mb-2 h-5 w-[85%]" />
-    <SkeletonLines noOfLines={7} />
+  <Card className="relative ms-8 w-[85vw] space-y-4 rounded-4xl border bg-background px-6 py-6">
+    <Skeleton data-label="banner" className="mb-6 h-44 w-full rounded-xl" />
+    <Skeleton data-label="tag" className="h-5 w-19" />
+    <Skeleton data-label="title" className="-mb-2 h-5 w-1/2" />
+    <SkeletonLines data-label="description" noOfLines={2} className="m-0 p-0" />
+    <Skeleton data-label="button" className="h-10 w-1/4" />
   </Card>
 )
 

app/[locale]/developers/page.tsx

@@ -115,7 +115,7 @@ const DevelopersPage = async ({
           </div>
 
           {/* Mobile */}
-          <div className="-mx-8 ps-4 md:hidden">
+          <div className="-mx-8 md:hidden">
             <BuilderSwiper paths={paths} speedRunDetails={speedRunDetails} />
           </div>
         </Section>