https://kotlinlang.org logo
Title
s

Stan van der Bend

04/13/2023, 8:36 AM
Hello, I am trying to dynamically load some content using react's
Suspense
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
                            }
                        }
                    }
                }
            }
        }
    }
}
Okay nvm I found the correct way. to do this I think:
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()
}