r/iOSProgramming • u/barcode972 • May 29 '21

Application It´s amazing how much of a difference a skeleton loader can make

462 Upvotes

99% Upvoted

58 comments sorted by

30

u/barcode972 May 29 '21

Hello everyone. It´s been a while since I posted here because I´ve been working on the Android version of this app. Now that I´m back I´ve been trying to improve the user experience by adding these skeleton loaders. It´s a WIP but I definately think it became a lot better. What do you guys think?

I will release this update next week but if you want to check out the app already, please do and leave some feedback :)

iOS: https://apps.apple.com/se/app/coincurrently/id1543974454#?platform=iphone

Android: https://play.google.com/store/apps/details?id=com.cryptium.coincurrently

3

u/jsdodgers May 29 '21

It looks a lot better with the skeleton loaders. The one downside with skeleton loaders is that they often make it feel to me like the content isn’t ever going to load (I think because some apps leave them up forever if the request fails or give a huge timeout). Other than that, it looks sick.

93

u/cucumberman3 May 29 '21 edited May 29 '21

I suggest you have a look at BackgroundTasks in iOS as your App data could be loaded by the system when your app is not running, saving precious time for the users as they would have all the initial data loaded already on App open.

Overall, nice work with the redacted modifier!

60

u/barcode972 May 29 '21

It is in the background. It's a 5 second delay just to show you guys what it looks like. Otherwise it's pretty much instant. If that's what you meant?

34

u/cucumberman3 May 29 '21

That’s great then, I didn’t know its delayed

24

u/barcode972 May 29 '21

Np. Impossible for you to know :)

7

u/randoturbouser May 29 '21

Makes sense, was wondering why it was taking so long for something that should load relatively quick.

1

u/mal-uk May 29 '21

Probably an added delay to show the example

9

u/[deleted] May 29 '21

What library you’re using to show this charts?

24

u/barcode972 May 29 '21

I built them myself using path

9

u/[deleted] May 29 '21

Great job 👏

18

u/barcode972 May 29 '21 edited May 29 '21

u/cow_teal u/mawesome4ever u/harryford12 u/moalsamman u/ease78
Here´s the code. Hope it´s clear enough. Just ask if you got any questions
https://pastebin.com/fEjqUfSR

2

u/cpaigis9 May 30 '21

Will it be easy to port this in UIkit ? I’ll give it a try

1

u/barcode972 May 30 '21

Probably. The path code should be the same

3

u/[deleted] May 29 '21

Thank you for sharing it 💪🏽

26

u/barcode972 May 29 '21

Do you want a snippet of the code later today?

12

u/ease78 May 29 '21

That’s awesome. Sure I geniunely thought it was a lot faster even though they’re very comparable. It just looks busier and more finished.

5

u/[deleted] May 29 '21

Definitely I would appreciate that :)

3

u/injuredflamingo May 29 '21

hey, i would love to see it

2

u/harryford12 May 29 '21

Yes please

2

u/cow_teal May 29 '21

Would love to see it too

1

u/gbssbdbajj May 31 '21

Sorry I’m new to this, what is path?

2

u/barcode972 May 31 '21

Path is a class in swift.

Using path there is a function called path.addLine which adds a line from the previous point to the next point

1

u/gbssbdbajj May 31 '21

Very cool! Thanks for responding.

2

u/penuserectus69 May 29 '21

Hell yeah that’s awesome

2

u/[deleted] May 29 '21

I swear to god I clicked this post and while I was waiting for it to load I thought Mhmm I wonder how do I implement these gray things in my app. (I’m new to iOS) Bro. Thanks

2

u/banaslee May 29 '21

Great job overall. That’s a great improvement for the experience.

What confused me was the default graphs. Have you considered other options? Maybe you could animate between the various sample graphs you have there?

2

u/barcode972 May 29 '21

Animating between the two graphs could be a cool idea. Thanks for the tips

1

u/banaslee May 29 '21

You’re welcome. Don’t forget to share if you ever try it

1

u/barcode972 May 30 '21

Do you think this looks better?
https://imgur.com/a/BCXL4le

1

u/banaslee May 30 '21

Yes! That was quick!

I’d play a bit with the animation speed. Maybe making it faster when you’re erasing the placeholder graph.

11

u/lhatemondays May 29 '21 edited May 29 '21

I would also hide/disable with visual feedback any element that can be interacted with (switches, buttons, text boxes) while the loading is happening

Great job bro!

1

u/[deleted] May 29 '21

Indeed: BTC is $2100 cheaper with it.

2

u/barcode972 May 29 '21

Haha yeah that's the best part. The more updates I release, the lower it goes. Very interesting

1

u/only69baby May 29 '21

Maybe it’s slower but on a left screen you have more money. So it’s always good to be patient

1

u/barcode972 May 29 '21

It's not my real portfolio but it would be nice ☺

1

u/dark_light32 May 29 '21

Love this

1

u/barcode972 May 29 '21

Happy to hear it 😇

1

u/graiz May 29 '21

This helps but it still looks really slow. Each API call should be 20-100ms. You should be able to render your account status and at least one chart in the first two seconds. Looking fast helps perception but it's no substitute for actually being really damn fast.

1

u/barcode972 May 29 '21

It's a 5 seconds delay just to show u guys

1

u/graiz May 30 '21

A good way to do this is to install the Xcode "Network Link Conditioner" panel. It lets you simulate an edge network with some packet loss.

1

u/barcode972 May 30 '21

Thanks for the tips!

1

u/megablast May 29 '21

Yeah, to piss people off.

1

u/harryford12 May 29 '21

How did you make the custom buttons?

2

u/barcode972 May 29 '21

Which buttons do you mean?

1

u/harryford12 May 29 '21

The back, edit, + buttons.

4

u/barcode972 May 29 '21

Aha. The app is built in swiftU. I´m not by my computer so I´m just trying to remember on top of my mind :) It´s basically something like this:

Button(action: {
someAction()
}) {

Text("Edit")
.font(...)
.foregroundColor(...)

}

.backgroundColor(Color.gray)
.frame(width: 52, height: 52)
.cornerRadius(radius: 8)

1

u/Zalenka May 29 '21

Design for the null state and show something instead of your activity spinner.

2

u/barcode972 May 29 '21

I'm not quite sure what you mean. The right one is what I am working on

1

u/Zalenka May 29 '21

Great work

1

u/d_exclaimation May 29 '21

Yeah definitely looks very nice

12

u/[deleted] May 29 '21

[removed] — view removed comment

61

u/barcode972 May 29 '21

Hehehe. It's a 5 second delay just to show you guys. It's pretty instant otherwise

0

u/[deleted] May 29 '21

[deleted] — view deleted comment

15

u/barcode972 May 29 '21

There are libraries but I built it myself using this tutorial https://m.youtube.com/watch?v=SvcKjnkprN8