How can I use routeData and Suspense to avoid freezing the UI?

[e3stpavel]

Currently I use routeData function to check for API health and it works fine

export const routeData = () => createRouteData(async () => {
  const pb = usePocketBase()

  return (await pb.health.check()).message
})

but as long as I decided to try out what would be if request take a little bit longer by artificially adding timeout to routeData function like so

await new Promise(resolve => setTimeout(() => resolve(''), 5000)) // 5 seconds

I got the following results:

I use ssr and islands enables in vite.config.ts like so

plugins: [
    solid({
      // ssr: true,
      islands: true, // automatically enables ssr
    }),
]

and using Suspense to render the UI like this

<Suspense fallback={ <span>Loading...</span> }>
  <span class="font-bold">
    { message() }
  </span>
</Suspense>

So the question is:
Is there any way to load data using createRouteData or createServerData$ and improve time to interact using Suspense in UI?
if not then, How can I use islands to achive the same results but using components?

Please consider that I'm new to Solid and I pretty excited to try all its features but unfortunatelly the docs are lacking a lot of things atm.

p.s. I'm using pocketbase as API