General Mudkipp
General Mudkipp
PostsComments
TTCTheo's Typesafe Cult
Created by robertinio on 11/7/2023 in #questions
Suspense with TRPC server query
One option would be to check query.isFetched, and return a skeleton if it isn’t.
6 replies
TTCTheo's Typesafe Cult
Created by General Mudkipp on 12/14/2023 in #questions
Clerk Webpack Importing Error
No problem!
7 replies
TTCTheo's Typesafe Cult
Created by General Mudkipp on 12/14/2023 in #questions
Clerk Webpack Importing Error
Hopefully that fixes it for you
7 replies
TTCTheo's Typesafe Cult
Created by General Mudkipp on 12/14/2023 in #questions
Clerk Webpack Importing Error
Yes, but I'm not entirely sure what fixed it. Here's what looks different from my old code; - const { user } = useUser(); - "use client" directive at the top - if (!user) { return null } before the actual return statement
7 replies
TTCTheo's Typesafe Cult
Created by General Mudkipp on 7/9/2023 in #questions
White flashbang for millisecond before page load
Not sure if it's a browser thing though, on Firefox the issue is pretty evident but on Chrome it's not present at all
3 replies
TTCTheo's Typesafe Cult
Created by General Mudkipp on 7/5/2023 in #questions
Headless UI Transitions
Might have also been to do with the max-height, but then again there were a lot of problems with that initial code lol
9 replies
TTCTheo's Typesafe Cult
Created by General Mudkipp on 7/5/2023 in #questions
Headless UI Transitions
iirc The issue I had was to do with the way that the Transition component was creating a parent div (?) to animate it, which my child element wasn't liking
9 replies
TTCTheo's Typesafe Cult
Created by General Mudkipp on 7/5/2023 in #questions
Headless UI Transitions
I ended up switching over to Framer Motion; 
<Listbox>
  {({ open }) => (
  
    {/* ... */}
  
    <AnimatePresence>
        { open && (
            <motion.div
                initial={{ height: 0 }}
                animate={{ height:"16rem" }}
                exit={{ height: 0 }}
                transition={{ duration: 0.2 }}
                className="absolute w-full z-50"
            >
                <Listbox.Options static className="max-h-64 mt-2 border-2 h-full border-white overflow-auto z-50 w-full rounded-md bg-gray-950 text-white">
                    {yearChoiceLoad()}
                </Listbox.Options>
            </motion.div>
        )}
    </AnimatePresence>
  
    {/* ... */}
  
  )}
</Listbox>
<Listbox>
  {({ open }) => (
  
    {/* ... */}
  
    <AnimatePresence>
        { open && (
            <motion.div
                initial={{ height: 0 }}
                animate={{ height:"16rem" }}
                exit={{ height: 0 }}
                transition={{ duration: 0.2 }}
                className="absolute w-full z-50"
            >
                <Listbox.Options static className="max-h-64 mt-2 border-2 h-full border-white overflow-auto z-50 w-full rounded-md bg-gray-950 text-white">
                    {yearChoiceLoad()}
                </Listbox.Options>
            </motion.div>
        )}
    </AnimatePresence>
  
    {/* ... */}
  
  )}
</Listbox>
Works pretty much perfectly.
9 replies
TTCTheo's Typesafe Cult
Created by General Mudkipp on 6/16/2023 in #questions
Good learning resources?
Thanks, these are really helpful :)
20 replies
TTCTheo's Typesafe Cult
Created by General Mudkipp on 6/16/2023 in #questions
Good learning resources?
Personally I prefer to have a good baseline understanding of entente I’m working with before delving into anything. It’s like trying to recite a poem in Mandarin. Sure, you might be able to get away with a lot just by recognising patterns, but actually taking the time to learn it would greatly help
20 replies
TTCTheo's Typesafe Cult
Created by General Mudkipp on 6/16/2023 in #questions
Good learning resources?
I know building projects is good, but I’m coming from a place of having pretty much no knowledge of React. So when I see terms like hook, prop, stateless, etc. I have no clue what they mean, and trying to figure it out only leads me further down the rabbit hole.
20 replies
TTCTheo's Typesafe Cult
Created by General Mudkipp on 6/16/2023 in #questions
Good learning resources?
For future reference, I found this site to be particularly helpful: https://www.freecodecamp.org/learn/front-end-development-libraries/react/
20 replies
TTCTheo's Typesafe Cult
Created by General Mudkipp on 6/16/2023 in #questions
Good learning resources?
That's what I've been doing, but along the way I've noticed that I'm not building a good knowledge base of various features/terms/etc, so I thought it'd be best to build a solid foundation that I can expand on with projects
20 replies
TTCTheo's Typesafe Cult
Created by General Mudkipp on 5/27/2023 in #questions
'Component' cannot be used as a JSX component.
I was able to solve the issue by downgrading to Next.js 13.2.4 Thanks for the advice though :)
11 replies
TTCTheo's Typesafe Cult
Created by General Mudkipp on 5/27/2023 in #questions
'Component' cannot be used as a JSX component.
What's even stranger is that Vercel seems to be able to build it, but running npm run build on my terminal fails
11 replies
TTCTheo's Typesafe Cult
Created by General Mudkipp on 5/27/2023 in #questions
'Component' cannot be used as a JSX component.
I assume there's some dependency that's on the wrong version but I have no clue how to check, is there anything I can do?
11 replies
TTCTheo's Typesafe Cult
Created by General Mudkipp on 5/27/2023 in #questions
'Component' cannot be used as a JSX component.
I don't think it's anything that I did, as I created a completely new project using the same configuration and I'm running into the same problem.
11 replies
TTCTheo's Typesafe Cult
Created by General Mudkipp on 5/27/2023 in #questions
'Component' cannot be used as a JSX component.
_app.tsx
11 replies