# Scrolled To End display a loading indicator

**URL:** <https://forums.fusetools.com/t/scrolled-to-end-display-a-loading-indicator/3601>\
**Category:** How-to Discussions\
**Created:** [May 21, 2017, 1:22pm UTC](https://forums.fusetools.com/t/scrolled-to-end-display-a-loading-indicator/3601 "2017-05-21T13:22:58Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ybiza](https://avatars.discourse-cdn.com/v4/letter/y/2bfe46/32.png) [@Ybiza](https://forums.fusetools.com/u/Ybiza)\
**Post date:** [May 21, 2017, 1:22pm UTC](https://forums.fusetools.com/t/scrolled-to-end-display-a-loading-indicator/3601/1 "2017-05-21T13:22:58Z")

</div>

How to bring the loading when it reaches the endpoints list?  
I’m from Russia, sorry for the translation.

```
<Panel>
<ScrollView SnapMinTransform="false">
	<DockPanel>
		<StackPanel>
			<Each Items="{posts}">
				<Panel>
					<Deferred>
						<DockPanel>
							<Product Title="{title}" Unit="12" Identifier="2" Price="1000" />
						</DockPanel>
					</Deferred>
				</Panel>
			</Each> 
		</StackPanel>
	</DockPanel>
	<Scrolled To="End" Within="100">
		<Callback Handler="{loadpost}" />
	</Scrolled>
</ScrollView>
</Panel>
```

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [May 22, 2017, 7:36am UTC](https://forums.fusetools.com/t/scrolled-to-end-display-a-loading-indicator/3601/2 "2017-05-22T07:36:01Z")

</div>

Hi Ybiza,

your question is so general that it’s hard to provide a simple answer or a straight-forward solution. For working with dynamic `ScrollView` contents, you might want to take a look at [this example](https://www.fusetools.com/examples/endless-scroller).

As for the code you posted, here’s a general approach that should get you started in the right direction:

```auto
<App>
    <JavaScript>
        var Observable = require("FuseJS/Observable");

        var posts = Observable();
        var isLoading = Observable(false);

        function loadpost() {
            isLoading.value = true;
            doSomethingSlow().then(function(x) {
                atEnd.check();
                isLoading.value = false;
            }).catch(function(e) {
                isLoading.value = false;
            });
        }

        function doSomethingSlow() {
            var p = new Promise(function(resolve, reject) {
                // fetch stuff, then resolve
                resolve("done");
                // or if something bad happens, reject
                // reject("some error");
            });
            return p;
        }

        module.exports = {
            posts: posts,
            loadpost: loadpost,
            isLoading: isLoading
        }
    </JavaScript>

    <Panel>
    <ScrollView SnapMinTransform="false">
        <DockPanel>
            <StackPanel>
                <Each Items="{posts}">
                    <Panel>
                        <Deferred>
                            <DockPanel>
                                <Product Title="{title}" Unit="12" Identifier="2" Price="1000" />
                            </DockPanel>
                        </Deferred>
                    </Panel>
                </Each>
                <WhileTrue Value="{isLoading}">
                    <!-- show a loading indicator at the bottom of the list -->
                </WhileTrue>
            </StackPanel>
        </DockPanel>
        <Scrolled ux:Name="atEnd" To="End" Within="100">
            <Callback Handler="{loadpost}" />
        </Scrolled>
    </ScrollView>
    </Panel>
</App>

```

---

<div class="post-metadata">

**Author:** ![Ybiza](https://avatars.discourse-cdn.com/v4/letter/y/2bfe46/32.png) [@Ybiza](https://forums.fusetools.com/u/Ybiza)\
**Post date:** [May 23, 2017, 4:48pm UTC](https://forums.fusetools.com/t/scrolled-to-end-display-a-loading-indicator/3601/3 "2017-05-23T16:48:35Z")

</div>

Thank you very much for the detailed answer. I will definitely take Your advice.