# Recreate 'Reload Data' Behavior

**URL:** <https://community.weweb.io/t/recreate-reload-data-behavior/3043>\
**Category:** Ask us anything\
**Created:** [June 14, 2023, 5:53am UTC](https://community.weweb.io/t/recreate-reload-data-behavior/3043 "2023-06-14T05:53:20Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [June 14, 2023, 5:53am UTC](https://community.weweb.io/t/recreate-reload-data-behavior/3043/1 "2023-06-14T05:53:20Z")

</div>

Hi everyone. I am trying to recreate the behavior of the ‘Reload Data’ button in the editor. I have the icon and a workflow attached that works, but can’t figure out how to get the rows in the datagrid to disappear and reappear. Would also love to know how to get the icon to spin like the one in the editor too. 🙂

Details in loom. Appreciate any guidance!

---

<div class="post-metadata">

**Author:** ![Quentin](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/quentin/32/6_2.png) [@Quentin](https://community.weweb.io/u/Quentin)\
**Post date:** [June 14, 2023, 9:23am UTC](https://community.weweb.io/t/recreate-reload-data-behavior/3043/2 "2023-06-14T09:23:16Z")

</div>

Hey, to mimic the reload data from the editor, you would need:

- a fetch on all your collections (in parallel to load faster)
- a loader and animation that is displayed when a collection `isFetching`
- displaying your collection when a collection isn’t `isFetching` anymore

---

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [June 15, 2023, 10:33pm UTC](https://community.weweb.io/t/recreate-reload-data-behavior/3043/3 "2023-06-15T22:33:06Z")

</div>

Hey @Quentin thank you for your help with this! I was able to get it 95% like the WeWeb one. The only issue I am having is that after the icon rotates, it springs back to its original position. I’d like it to just do the 0.5 rotate and stop. Details in loom. Any suggestions please? Thanks!

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [June 16, 2023, 4:47am UTC](https://community.weweb.io/t/recreate-reload-data-behavior/3043/4 "2023-06-16T04:47:52Z")

</div>

Hey @Dorian, might be a long shot, as I don’t yet know how the Effects → Transform works under the hood, I’d guess [this question about css animations could help you.](https://stackoverflow.com/questions/12991164/maintaining-the-final-state-at-end-of-a-css-animation) But it is really just guessing, might also be that the if formula is reverting back, as it is not fetching anymore.

---

<div class="post-metadata">

**Author:** ![Quentin](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/quentin/32/6_2.png) [@Quentin](https://community.weweb.io/u/Quentin)\
**Post date:** [June 16, 2023, 9:36am UTC](https://community.weweb.io/t/recreate-reload-data-behavior/3043/5 "2023-06-16T09:36:28Z")

</div>

If I were you, I would use an animated SVG icon rather than doing CSS animations. Like the ones you can find on: [SVG Loaders - Sam Herbert](https://samherbert.net/svg-loaders/)

Then, you just need to display the icon

---

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [June 16, 2023, 8:13pm UTC](https://community.weweb.io/t/recreate-reload-data-behavior/3043/7 "2023-06-16T20:13:51Z")

</div>

Thanks @Broberto. I tried playing around with that but no success. Worst case I’ll just keep it as is, the ‘springiness’ is starting to grow on me. 🙂

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [June 16, 2023, 8:24pm UTC](https://community.weweb.io/t/recreate-reload-data-behavior/3043/8 "2023-06-16T20:24:25Z")

</div>

It isn’t really that bad 🙂 I think too. Another Idea that came to my mind would be creating a simple lottie and triggering it on click. You can now do lotties in Figma in a few clicks 🙂 I’m attaching references:

> **[LottieFiles | Figma Community](https://www.figma.com/community/plugin/809860933081065308)**
>
> Figma Community plugin - Lottie animations for your designs.
> 
> Core Features:
> Export your Figma designs as production-ready Lottie animations, and use them across your websites or apps.Access a library of over 80,000+ free, ready-to-use...

---

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [June 19, 2023, 2:39am UTC](https://community.weweb.io/t/recreate-reload-data-behavior/3043/9 "2023-06-19T02:39:27Z")

</div>

@Quentin And just display the SVG only when isFetching is true? Yes I could do that, but I think I will leave it as is. Thanks though.
