Stan van der Bend
04/13/2023, 8:36 AMSuspense
component and display a CircularProgressIndicator
(from kotlin-mui) while it is loading some list of event objects retrieved through a HTTP client.
I don't know how to achieve this best. This is probably very wrong, but is something like this possible:
private val scope = MainScope()
val EventsPage = FC<Props> {
Suspense {
fallback = FC<Props> { CircularProgress() }.create()
lazy {
scope.promise<ComponentModule<EventsProps>> {
delay(10.seconds)
val eventList = getEvents() // suspend function
object : ComponentModule<EventsProps> {
override val default: ComponentType<EventsProps> = FC {
for (event in eventList) {
Typography {
+event.name
}
}
}
}
}
}
}
}
val EventsPage = FC<Props> {
var eventList by useState<List<Event>?>(null)
useEffectOnce {
scope.launch {
eventList = getEvents()
}
}
eventList?.run {
for (event in this) {
EventCard {
this.event = event
}
}
} ?: CircularProgress()
}