add Suspense functionality to the cards/page.tsx

This commit is contained in:
Ivan Rudik
2025-11-09 12:53:59 +00:00
parent 805445084b
commit d2f69924c5
+9 -3
View File
@@ -1,6 +1,6 @@
"use client"; "use client";
import React, { useState, useEffect } from "react"; import React, { useState, useEffect, Suspense } from "react";
import { motion, useMotionValue, useTransform, useAnimation } from "framer-motion"; import { motion, useMotionValue, useTransform, useAnimation } from "framer-motion";
import { useRouter, useSearchParams } from "next/navigation"; import { useRouter, useSearchParams } from "next/navigation";
import { CardData } from "@/app/exportType/types"; import { CardData } from "@/app/exportType/types";
@@ -43,8 +43,14 @@ const parseAiResponse = (markdownString: string): CardData[] => {
}); });
return ideas; return ideas;
}; };
export default function CardsPageWrapper(){
export default function CardsPage() { return (
<Suspense fallback={<div className="grid h-screen w-full place-items-center bg-orange-100"><p>Loading cards...</p></div>}>
<CardsPage />
</Suspense>
);
}
function CardsPage() {
const [cards, setCards] = useState<CardData[]>([]); const [cards, setCards] = useState<CardData[]>([]);
const [initialCards, setInitialCards] = useState<CardData[]>([]); const [initialCards, setInitialCards] = useState<CardData[]>([]);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);