Merge pull request #119 from danigonzser/m4/preview/ultimos_detalles

Últimos detalles de código

cypress/e2e/mobile/editor.cy.ts

@@ -149,8 +149,8 @@ describe('Editor E2E Testing', () => {
     cy.get('[data-cy="rectcolor-#008000-mobile"]').click()
     cy.get('[data-cy="rectcolor_paint_mobile"]').click()
 
-    cy.get('[data-cy="sync_button_mobile"]').click({ force: true }).wait(3000)
-    cy.get('.grid > .text-sm').should('have.text', "Meme manually saved!Just in case, it happens every minute 😉")
+    cy.get('[data-cy="sync_button_mobile"]').click({ force: true }).wait(5000)
+    cy.get('.grid > .text-sm').should('have.text', "Loaded memeMeme manually saved!Just in case, it happens every minute 😉")
 
     cy.visit('http://localhost:3000')
     cy.get('.grid > :nth-child(1) > .block').click()

package.json

@@ -37,37 +37,38 @@
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.3",
+    "@types/fabric": "^5.3.9",
+    "@types/hammerjs": "2.0.46",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "1.0.0",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.1",
     "fabric": "^6.4.3",
     "hammerjs": "2.0.8",
     "lucide-react": "^0.454.0",
     "next": "15.0.1",
     "next-themes": "^0.3.0",
+    "postcss": "^8.4.47",
     "prisma": "5.21.1",
     "react": "19.0.0-rc-69d4b800-20241021",
     "react-colorful": "^5.6.1",
     "react-dom": "19.0.0-rc-69d4b800-20241021",
     "react-hook-form": "^7.53.1",
-    "use-debounce": "10.0.4",
-    "vaul": "^1.1.0",
-    "zod": "^3.23.8",
-    "postcss": "^8.4.47",
     "tailwind-merge": "^2.5.4",
     "tailwindcss": "^3.4.14",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.6.3",
-    "@types/fabric": "^5.3.9",
-    "@types/hammerjs": "2.0.46",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "eslint": "^8",
-    "eslint-config-next": "15.0.1"
+    "use-debounce": "10.0.4",
+    "vaul": "^1.1.0",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "cypress": "13.15.1",
+    "cypress-high-resolution": "^1.0.0",
     "cypress-visual-regression": "5.2.2"
   }
 }

src/app/(home)/catalogues/[id]/page.tsx

@@ -3,6 +3,7 @@ import { getCatalogueById } from "@/lib/getmemes"
 import { Suspense } from "react"
 import type { Metadata } from 'next'
 import CatalogueNav from "@/components/catalogue_navegation"
+import TitleSkeleton from "@/components/title_skeleton"
 
 export async function generateMetadata(
   props: {
@@ -35,12 +36,12 @@ export default async function CatalogueMemes(
     <>
       <div className="flex-row flex justify-center">
         <h1 className="text-xl font-bold flex-row flex gap-4">
-          <Suspense fallback={<div>Loading title...</div>}>
+          <Suspense fallback={<TitleSkeleton />}>
             <CatalogueNav paramId={params.id} />
           </Suspense>
         </h1>
       </div >
-      <Suspense fallback={<div>Loading memes...</div>}>
+      <Suspense>
         <Thumbs paramId={params.id} />
       </Suspense>
     </>

src/components/catalogues_skeleton.tsx

@@ -1,43 +1,25 @@
-import { CalendarIcon, ClockIcon, Trash2Icon } from "lucide-react"
 import { Skeleton } from "./ui/skeleton"
-import { Button } from "./ui/button"
 
 export function CataloguesSkeleton() {
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6">
 
-      {[...Array(30)].map((_, key) => (
+      {[...Array(10)].map((_, key) => (
         <div
           key={key}
           className="group bg-card text-card-foreground rounded-lg shadow-md overflow-hidden transition-transform duration-200 ease-in-out hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary dark:shadow-black"
         >
           <div className="p-4">
             <Skeleton className="w-24 h-6 bg-muted-foreground/20 mb-2" />
-            {/* <h2 className="text-xl font-extrabold mb-2 group-hover:text-primary transition-colors duration-200">
-              {catalogue.title}
-            </h2> */}
             <Skeleton className="w-full h-4 bg-muted-foreground/20 mb-2" />
-            {/* <p className="text-lg text-muted-foreground mb-2 truncate">{catalogue.description}</p> */}
             <div className="flex items-center text-sm text-muted-foreground mb-1">
-              <ClockIcon className="w-4 h-4 mr-1" />
-              {/* <span>Updated: {getRelativeTimeString(catalogue.updatedAt, "en")}</span> */}
               <Skeleton className="w-24 h-4 bg-muted-foreground/20" />
             </div>
             <div className="flex items-center text-sm text-muted-foreground">
-              <CalendarIcon className="w-4 h-4 mr-1" />
-              {/* <span>Created: {getRelativeTimeString(catalogue.createdAt, "en")}</span> */}
               <Skeleton className="w-24 h-4 bg-muted-foreground/20" />
             </div>
           </div>
-          <Button
-            variant="destructive"
-            size="icon"
-            className="absolute bottom-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-          // onClick={handleRemove}
-          >
-            <Trash2Icon className="h-4 w-4" />
-            <span className="sr-only">Remove catalogue</span>
-          </Button>
+
         </div>
       ))}
     </div>

src/components/memes_skeleton.tsx

@@ -0,0 +1,11 @@
+import { Skeleton } from "./ui/skeleton"
+
+export default function MemesSkeleton() {
+  return (
+    <div className="flex flex-col content-center items-center px-4 py-8">
+      {[...Array(30)].map((key) => (
+        <Skeleton key={key} className="h-[225px] w-[400px] bg-muted-foreground/20 rounded-xl" />
+      ))}
+    </div >
+  )
+}

src/components/thumbnail.tsx

@@ -3,6 +3,28 @@ import { StaticImport } from "next/dist/shared/lib/get-img-props"
 import Image from "next/image"
 import { useEffect, useRef, useState } from "react"
 import { Skeleton } from "./ui/skeleton"
+import { cn } from "@/lib/utils"
+
+export function LoadingSpinner({ className }: { className?: string }) {
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="yellow"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn("animate-spin", className)}
+    >
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  )
+
+}
 
 export class DeadRect extends Rect {
   static get type() {
@@ -85,7 +107,9 @@ export function Thumbnail({ memeJSON }: { memeJSON: string }) {
   return (
     <>
       {isLoading ? (
-        <Skeleton className="h-[1920px] w-[1080px] bg-muted-foreground/20 rounded-xl" />
+        <Skeleton className="h-[225px] w-[400px] bg-muted-foreground/20 rounded-xl flex items-center justify-center" style={{ aspectRatio: "16/9", objectFit: "cover" }} >
+          <LoadingSpinner className="w-14 h-14" />
+        </Skeleton>
       ) : (
         <Image
           src={dataUrl}

src/components/thumbs.tsx

@@ -34,7 +34,7 @@ export default async function Thumbs({ paramId }: { paramId: string }) {
         // className="grid grid-cols-1 md:grid-cols-2 gap-6"
         (<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           {memes.map((meme, key) => (
-            <Suspense fallback={<div>Loading...</div>} key={key}>
+            <Suspense key={key}>
               <Thumb
                 meme={meme} memeCatalogueId={paramId}
               />

src/components/title_skeleton.tsx

@@ -0,0 +1,5 @@
+import { Skeleton } from "./ui/skeleton"
+
+export default function TitleSkeleton() {
+  return (<Skeleton className="bg-muted-foreground/20 h-[28px] w-[250px]" />)
+}