Hello, I am trying to dynamically load some conten...

# javascript

[Stan van der Bend]

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
                            }
                        }
                    }
                }
            }
        }
    }
}

[Stan van der Bend]

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()
}