Page took forever to load with no feedback, then a page didn't fully render

This might just be an overloaded server, but I was doing lessons and things were running smoothly up until that point. I got to the last part of the lesson (audio with dialog) and pressed Continue to enter the lesson. Nothing happened. This is the screen I was on.

I clicked Continue a couple of times and just as I pressed back, it seemed to have loaded, but then I was back at the screen where I started my day. It’s unfortunate that when I get to that page I can’t tell it to reload right there (or have it do so automatically if you see the page has been idle for 10+ minutes). In any case, navigated to the home page and that did the desired reload, where I could see the part of the lesson I was supposed to go into. I clicked the button to start it and the page loaded right away, but unfortunately it came incomplete. You can see the area where the audio/scrolling controls should be is a blank.

I reloaded the page (back in and re-entered) and it was okay. So maybe none of this has to do with the app and was just a transient problem.

To summarize, (1) it would be nice if when I press a button to start a lesson it gave me feedback right away, like a spinner or animation) and you could probably even lose your full-page animation for loading, (2) the page is weird when I navigate back and I know I reported something about that, but I’ve had some thoughts about how you might improve it and (3) I thought there was a broken lesson, but now I don’t know what the cause was. My apologies for putting multiple issues in one ticket, but they all happened together in short order around the same part of the lesson.

Hi Bob,
Thanks for the recommendations. I think they make much sense. I fully agree with point 1, even I get frustrated when clicking on “continue” button and nothing happens for a few seconds. I guess rest of the bugs you have experienced are connected with clicking multiple times on the continue link ( I should also disable the button once it is clicked so it will prevent any further actions).
Any way, I will try to reproduce that problem and will see if fixing point 1 will do the trick.
For point 2 - unfortunately we can’t do much there as the back button and its behavior comes from the App platform we are using. Joel have added some code to trick it a bit, but we can’t fully modify its behavior.

@fitterman I have added some loading animation on the ‘Continue’ button so it will be more clear now that something is going on. Also have blocked the double click on the button to prevent sending several times the same requests to the server. Hope this will improve overall usability.

1 Like

@timelinedev Outstanding solution. Thanks for fixing this.

2 Likes

Thanks to both of you! Alex, you’ve been a rockstar in here this past week or so, thanks :muscle:

Alex, For #2 I think we might be able to use some css trickery like visibility:hidden on those “pushpage” modules so you don’t see each page close. i do think the javascript needs to simulate a click on those back buttons, but maybe we can hide it from view while it’s happening? I’m tempted to play with it but I should keep myself in video production mode instead of breaking things here :sweat_smile: Feel free to experiment with tweaking that js listener function or delay for later.

1 Like

The formatting problem happened again and it’s reproducible on my phone. The page loaded quickly and looked great, but if I scrolled past the dialog and down to the comments, pushing the dialog off the top of the screen. When I scrolled back up to the dialog, it looked like what you see below. It is consistently reproducible on that lesson. I also see it happening on other lessons when I get to the dialog/quiz.

More details:

  • This time I encountered it on the Food and Drinks unit (which has a video), but the problem happens on others and those don’t have videos. I can reproduce it on any lesson I’ve tried.
  • Once this happens, if I hit the back button, I see your waiting animation, but it never finishes. I’m stuck there. I have to terminate the app the recover. The hanging is specifically happening after this rendering problem.
  • My husband has the same phone with the same system software versions. It has the same problem.
  • The phone is running stock Android 11 (Pixel 2) and the web view is 89.0.4389.90. I can track down more details if there’s something that would be helpful.

Sorry :cry:

Google released an update to WebView in the past 24 hours, which was causing a lot of breakage on Android. The workaround to the breakage is to delete all the updates to WebView, which dropped my phone from 89.0.4389.90 back to 83.0.4103.106. And guess what: this version fixed the bug I reported 2 days ago, which really makes me convinced this bug is in WebView, but maybe there is something to be done to work around it. To be clear: I was at 89.0… then went to whatever they released (didn’t get the number) and then dropped back to 84.0…

@joelrendall/@timelinedev, you might want to ask the AppPresser people to look into this, because I wonder if it’s a low-memory condition or something else in the particular page that they might be able to diagnose or advise you to change.

Thanks Bob, I’m actually looking into this right now. I can confirm the issue and to me it seems like sort of iframe issue. Since the app is iframed version of the site (most of the time) and the podcast player is also an iframe, it creates these nested iframe in iframe and once scrolled down it hide (not exactly as all the DOM elements are still there) the podcast iframe.

But the issue with WebView might be also the reason all this is happening. I wonder if AppPresser can compile the app with its own version of webView.

Thanks for all the details and the info it is really helpful.

This happens in a web browser on a desktop computer (Firefox on MacOS), so maybe this specific issue is something else and should be broken out, but maybe it’s related. I don’t know. Go to the lesson, scroll down to the comments and then hit the browser’s back button. It will hang there on the animation.

I’ve added some tricky script that would keep the podcast player ‘alive’ all the time. Whenever you have time can you confirm that it works for you (it worked on my Android 8 with WebView being on v.89).
Thanks again.

You must have Harry Potter’s wand or something. It’s now working on my phone (83.0… webview) and my husband’s identical phone (89.0…). This page still causes the desktop browser and the mobile app to do funky things on the back navigation, but that must be something else altogether and probably should go in as a separate ticket. You are amazing!

Hahah, thanks. I wish for such magic wand but no luck with such items in this universe. I will check the desktop issue. May be similar solution would work.

I’m trying to reproduce this but with no luck. Here is what I do - I go to Food and Drinks unit and there I’m completing the last lesson before the listening activity. Once I’m finished with the lesson I press the ‘Continue’ button and the shorties is loaded. There all seems to work well. On back button the previous lesson is reloading completely. I’ve tested the back button on the bem-vindo page - I’ve opened the shortie from there and then hit the back button and the previous page just reloaded. May be I’m not doing something correctly (or the bug is gone).
I’m testing this in Mojave with FireFox (freshly downloaded and installed).
Let me know if I’m missing something.
Thanks.

I can reproduce it (still) in 2 browsers. My normal browser is Firefox (on a Mac) and I have a lot of privacy feature enabled, Privacy Badger, Disconnect and stuff like that. So I tried it on Safari, where I had a completely clean slate, no plugins and no cookies, etc. I do have 3rd-party cookies disabled, but I don’t think much else. The steps were (1) log in, (2) choose Learn / Units, (3) Scroll to Food & Drink, (4) choose the last part of the lesson, the audio drill, (5) scroll down far enough to only see comments, (6) scroll back up and then (7) press the back button on the browser.

Notice that I did not interact at all with the video, audio or the quiz, etc.

Let me know if that works for you, or not.

1 Like

Hi Bob, sorry for the delay, was a bit sick this week.
Thanks a lot for the steps. I tested it on my VirtualBox running Mojave and brand new FireFox and it was not causing this issues. But the Safari had the problem. Basically this is caused by the back button checking for browser cached version of the page and not loading it from scratch. We had some code that was preventing this but it seems parts of it were deprecated by the browsers. So i changed the code with another approach which seems to fixed the issue on Safari, so most probably it will be fixed for all the other browsers. If this doesn’t work for you, I will try to add some new (experimental but supported in newer browsers) code.
Regards,
Alex

Sorry to hear you were sick. Glad to hear you’re feeling better.

Good news: the problem is gone, so whatever you did fixed the Firefox issue as well. Congratulations, or rather, parabéns!

Bob

2 Likes