Pull to Refresh for iOS App

Install this theme component

Hello :wave:

There is a missing function from iOS PWAs, it isn’t contain the ‘pull to refresh’ so if you want to reload you have to close the PWA and reopen. This theme component tries to fill this gap with a ‘pull to refresh’ function. I have disabled this on chat pages because this isn’t work safely in channels… The activation point is the #main-outlet so if you pull down under the header on the top of the page it will trigger the loader.

When you pull down it will appears continuously and when you reach the ready point it’s start spinning slowly with a highlight effect. When you release it will start spinning faster and we keep the loader on the top of the page during reloading.

It contains some theme settings to customize the loader.

Thanks for everyone tested it newer devices in this topic :hugs:

TODO:

  • Try to recreate the default Safari loader or something like that. :white_check_mark:
  • Find a way to keep loader during reloading :white_check_mark:
    • use CSS animations instead of Javascript to keep loader during reload
11 Likes

It works with DiscourseHub too :flushed: That’s great.

I have to pull down 2-3 seconds, and that is a bit long, but I don’t know if that comes from i-devices or the component. Not a biggie, though.

3 Likes

When you pull it quickly, it just refreshes immediately. But when you pull it at a relatively slower speed, the chevron renders first, followed by the loading spinner. I’m guessing the delay between the chevron and the loading spinner is intentional for better feedback and to avoid unnecessary triggers. Please correct me if I’m wrong, @Don.

3 Likes

Hello :wave:

Here it how it looks like now. I try to something similar like the default Safari loader. When you pull down it will appears continuously and when you reach the ready point it’s start spinning slowly with a highlight effect. When you release it will start spinning faster and we keep the loader on the top of the page, before it actually start reload the page it will hide the loader.

1 Like

This is so stupid question, and maybe I should be happy, but why don’t I see any kind of loader effect? Well, I don’t see even Discourse’s — except here Meta sometimes when I use PWA. Too good :joy: internet service?

1 Like

What do you mean?
This isn’t done yet. Can you share a screen record what you see on your site during reload?

1 Like

Sure, but no. Right now this component doesn’t do anything. iPad does stranger things with PWA every now and then. Rebooting helps. PWAs are bit problematic right now, and it went worse after latest iPadOS. But now booting didn’t help either.

Can I revert back and if yes, how?

And that ”not updating” started after yesterdays update of the component, I assume. I didn’t checked it, though. But it can be a coincident too and the real issue is OS.

iPhone works, though. It shows first that… can’t remember its name in English… downward arrowhead and then spinner. That happened never on iPad, but screen went down and when released it updated the forum.

If I change the theme, then it does updating — I see that really short blink. But second time, no. When I change again a theme, it works once, but not twice.

Really strange.

Yeah, I see this is probably because I only applied the style to mobile view and your iPad is on desktop view. I will fix this with the update. I think we can replace the arrows and spinner with new Safari style loader.

On which theme is the component not working?

All of those are same. And no, I don’t think it is conflict between components, because it does the same, meaning nothing except once, even when it is the only one in use.

Plugins are different thing, no idea.

I never remember that iPad isn’t a mobile.

I’ve updated the component with the new Safari style loader. It should works now better on iPad too. Actually iPad has a footer-nav on the top which hid it. I forget about that. :smile:

1 Like

Great job, as usual. Works fine and makes changing languages easier now. Thanks!

Footer-nav on the top — that sounds… logically :flushed:

1 Like

This is just the name of it because on iPhone it’s on bottom, but on iPad it’s on top. So technically it’s a top navigation on iPad but I call it footer nav out of habit. :sweat_smile:

I’m just thinking of should we add the auto reload when you pull down to the ready position or keep the reload when you release it? May be there will be some conflicts with it, I didn’t test it yet. Safari loader spinning once and then only the lines highlighted. We can’t do this because the line highlight animation stop during reload. But the spinning can run at that time too. So we can put the loader in loading state. Maybe better to keep it like this, now it has nice smooth CSS animations which can run during reloading and not exactly the same as Safari loader but kinda similar…what was the goal by the way :thinking: