fireship-io / fireship.io

Build and ship your app faster https://fireship.io
3.5k stars 1.3k forks source link

courses/react-next-firebase/app-loader/ #806

Open utterances-bot opened 2 years ago

utterances-bot commented 2 years ago

Loader

Create a loading spinner to manage loading states across the app

https://fireship.io/courses/react-next-firebase/app-loader/

dilanisawesome commented 2 years ago

When I implement the Navbar, no other components or anything shows

Bungleboy commented 2 years ago

I ran into this error from enabling TypeScript without really knowing what I was doing. I named the file components/Loader.ts and it read it but had syntax errors as shown:

error - ./components/Loader.ts
Error:
  x Expected '>', got 'className'
   ,----
 3 | return show ? <div className="loader"></div> : null;
   :                    ^^^^^^^^^
   `----

Caused by:
    0: failed to process input file
    1: Syntax Error

Was able to overcome this by renaming the file to components/Loader.tsx and changing the import line in index.tsx to:

import Loader from "../components/Loader.tsx"

This did the job and the loader started working. Not really sure if it is right but it fixed the problem for me.