Recreate 'Reload Data' Behavior

Ask us anything
1

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. :slightly_smiling_face:

Details in loom. Appreciate any guidance!

2

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
1 Like
3

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!

4

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. But it is really just guessing, might also be that the if formula is reverting back, as it is not fetching anymore.

5

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

Then, you just need to display the icon

7

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. :slightly_smiling_face:

8

It isn’t really that bad :slight_smile: 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 :slight_smile: I’m attaching references:

9

@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.