Skeleton loading with InertiaJS and React issue

Hello guys, I'm using React, InertiaJS and Laravel. But I have some problem making skeleton loading. Typically, we are passing the data from controller to component props like this

public function index() { return Inertia::render('DashboardPage', [ 'messages' => auth()->user()->receivedMessages()->paginate(10)->through(fn ($message) => [ 'id' => $message->id, 'message' => $message->message, 'is_read' => $message->is_read ]), ]); }

But I couldn't make a skeleton loading since it needs the data to be loaded first before the component or page render. I have tried using partial reloads. So in my controller, I have this code

public function index() { return Inertia::render('DashboardPage', [ Inertia::lazy(function () { return [ 'messages' => auth()->user()->receivedMessages()->paginate(10)->through(fn ($message) => [ 'id' => $message->id, 'message' => $message->message, 'is_read' => $message->is_read ]) ]; }) ]); }

And I want to access the the messages props using useEffect in my component like this

export default function DashboardPage() {

useEffect(() => { router.reload({ only: ['messages'] }) }, [])

return ( ... ) }

But it just gives me an infnite reload instead. I have been looking for an answer on the internet but I couldn't find any. I need help for this, thank you

JabatoForever

2 years ago

Level 2

Corrected version:

You are causing an infinite loop with useEffect in this way because the component takes "messages" as a prop. By doing so, you are making a server call and updating that exact prop every time the component is re-rendered. I have never actually tried using a skeleton with inertia, but since all the data is returned by the server with the page, I don't see why you would need it. The component doesn't really need to fetch anything since the data is already there the first time. lazy loading is usually used to refetch only the data that is needed. However, in this case, all the data is included in the initial request. You could consider listening for router events and perhaps set up a skeleton there. You can find more information about events in Inertia.js at this link: https://inertiajs.com/events. For example, in one of these events, you can check the loading state and maybe do something to show the skeleton.

router.on('progress', (event) => {
  this.form.progress = event.detail.progress.percentage
})

1 like

twilight

2 years ago

Level 1

@JabatoForever Well, I wanted to have a skeleton loading so that the user can view the page even if the data hasn't loaded yet. But I think what you said is correct. And I also I wanted to implement an infinite scroll, if you have an idea about its implementation, I'd be glad if you could share it. Thank you.

Please or to participate in this conversation.