Content update delay

[hushed vine]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[topaz sonnet]

"use client";

import Link from "next/link";
import { api } from "~/trpc/react";
import { VscLoading } from "react-icons/vsc";

const RecipeDisplay = () => {
    const recipes = api.recipe.getMine.useQuery().data;

    return recipes ? (
        <>
            <div className="w-full px-4">
                <div className="mx-auto mb-6 flex max-w-[900px] flex-wrap items-center justify-evenly gap-2 gap-y-4 rounded-2xl border p-4">
                    {recipes.length > 0 ? (
                        recipes.map((recipe) => (
                            <Link
                                key={recipe.id}
                                href={`/edit-recipe/${recipe.id}`}
                                className="cursor-pointer rounded-2xl bg-zinc-100 p-4 hover:opacity-75"
                            >
                                <h1 className="unselectable px-6 text-xl">
                                    {recipe.title}
                                </h1>
                                {/* <div className="mx-auto mt-2 h-[1px] w-4/5 bg-zinc-200"></div> */}
                            </Link>
                        ))
                    ) : (
                        <h1 className="text-xl text-zinc-500">
                            No recipes here...
                        </h1>
                    )}
                </div>
            </div>
        </>
    ) : (
        <div className="px-4">
            <div className="mx-auto flex max-w-[900px] items-center justify-center rounded-2xl border p-4 py-12">
                <VscLoading className="animate-spin" size={34} />
            </div>
        </div>
    );
};

export default RecipeDisplay;

This is the recipe display component

The edit recipe form uses useState

trpc + app router + prisma + nextauth