> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Loading

> Shows a loading indicator during pending search requests.

```kotlin Signature theme={"system"}
LoadingConnector(
    searcher: Searcher,
    viewModel: LoadingViewModel,
    debouncer: Debouncer
)
```

<Card title="Explore example code" icon="github" href="https://github.com/algolia/instantsearch-android/blob/master/examples/android/src/main/kotlin/com/algolia/instantsearch/examples/android/showcase/androidview/search/SearchAsYouTypeShowcase.kt">
  Browse the Loading example code on GitHub.
</Card>

## About this widget

Components that show a loading indicator during pending requests.

To add a loading indicator to your search experience, use these components:

* `Searcher`. The [`Searcher`](/doc/api-reference/widgets/instantsearch/android) that handles your searches.
* `LoadingViewModel`. The logic applied to the loading indicator.
* `LoadingView`. The concrete view displayed during loading.

## Examples

```kotlin Kotlin icon=code theme={"system"}
class MyActivity: AppCompatActivity() {
    val searcher = HitsSearcher(
        applicationID = "YourApplicationID",
        apiKey = "YourSearchOnlyAPIKey",
        indexName = "YourIndexName"
    )
    val loading = LoadingConnector(searcher)
    val connection = ConnectionHandler(loading)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val swipeRefreshLayout = SwipeRefreshLayout(this)
        val view: LoadingView = LoadingViewSwipeRefreshLayout(swipeRefreshLayout)
        connection += loading.connectView(view)
        searcher.searchAsync()
    }

    override fun onDestroy() {
        super.onDestroy()
        connection.disconnect()
        searcher.cancel()
    }
}
```

## Parameters

<ParamField body="searcher" type="Searcher" required>
  The [`Searcher`](/doc/api-reference/widgets/instantsearch/android) that handles your searches.
</ParamField>

<ParamField body="viewModel" type="LoadingViewModel" post={["default: LoadingViewModel()"]}>
  The logic applied to the loading indicator.
</ParamField>

<ParamField body="debouncer" type="Debouncer" post={["default: Debouncer(debounceLoadingInMillis)"]}>
  Delays searcher operations by a specified time duration.
</ParamField>

## ViewModel

<ParamField body="isLoading" type="Boolean">
  When true, the interface starts in a loading state.
</ParamField>

## ViewModel

<ParamField body="isLoading" type="Boolean" default={false}>
  When true, the interface starts in a loading state.

  ```kotlin Kotlin icon=code theme={"system"}
  LoadingViewModel(isLoading = true)
  ```
</ParamField>

## View

<ParamField body="view" type="LoadingView" required>
  The concrete view displayed during load.

  ```kotlin Kotlin icon=code theme={"system"}
  val swipeRefreshLayout = SwipeRefreshLayout(this)
  val view: LoadingView = LoadingViewSwipeRefreshLayout(swipeRefreshLayout)
  loading.connectView(view)
  ```
</ParamField>

### Compose UI

InstantSearch provides the `LoadingState` as a state model, which is an implementation of the `LoadingView` interface.
You need to connect `LoadingState` to the `LoadingConnector` or `LoadingViewModel` like any other `LoadingView` implementation.

```kotlin Kotlin icon=code theme={"system"}
class MyActivity : AppCompatActivity() {
    val searcher = HitsSearcher(
        applicationID = "YourApplicationID",
        apiKey = "YourSearchOnlyAPIKey",
        indexName = "YourIndexName"
    )
    val loadingState = LoadingState()
    val loading = LoadingConnector(searcher)
    val connections = ConnectionHandler(loading)

    init {
        connections += loading.connectView(loadingState)
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SwipeRefresh(
                state = rememberSwipeRefreshState(loadingState.loading),
                onRefresh = { loadingState.reload() },
            ) {
                //...
            }
        }
        searcher.searchAsync()
    }

    override fun onDestroy() {
        super.onDestroy()
        connections.disconnect()
        searcher.cancel()
    }
}
```