Rules Hub
Coding Rules Library
Prefer visual loading states over null
Always render a visual indicator (spinner or skeleton) during data fetching instead of returning null to improve user experience.
Bad example
| 1 | const UserProfile = ({ userId }) => { |
| 2 | const { data, isLoading } = useUser(userId); |
| 3 |
|
| 4 | // BAD: The component disappears completely while loading |
| 5 | if (isLoading) { |
| 6 | return null; |
| 7 | } |
| 8 |
|
| 9 | if (!data) return <div>User not found</div>; |
| 10 |
|
| 11 | return <div>{data.name}</div>; |
| 12 | }; |
Explanation (EN)
Returning null during a loading state causes the component to vanish, potentially causing layout shifts or making the app appear unresponsive/broken.
Objašnjenje (HR)
Vraćanje 'null' vrijednosti tijekom učitavanja uzrokuje nestajanje komponente, što može dovesti do pomicanja layouta ili dojma da aplikacija ne reagira.
Good example
| 1 | const UserProfile = ({ userId }) => { |
| 2 | const { data, isLoading } = useUser(userId); |
| 3 |
|
| 4 | // GOOD: Explicit visual feedback is provided |
| 5 | if (isLoading) { |
| 6 | return <UserProfileSkeleton />; |
| 7 | } |
| 8 |
|
| 9 | if (!data) return <div>User not found</div>; |
| 10 |
|
| 11 | return <div>{data.name}</div>; |
| 12 | }; |
Explanation (EN)
Using a Skeleton or Spinner informs the user that content is on its way, maintains layout stability, and provides a smoother perceived performance.
Objašnjenje (HR)
Korištenje Skeletona ili Spinnera obavještava korisnika da sadržaj stiže, održava stabilnost layouta i pruža bolji dojam performansi.
Notes (EN)
Skeletons are generally preferred over spinners for larger content blocks as they reduce the perceived load time by mimicking the final layout.
Bilješke (HR)
Skeletoni su obično bolji izbor od spinnera za veće blokove sadržaja jer smanjuju percipirano vrijeme učitavanja imitirajući konačni izgled.