search

jhipster / jhipster-vuejs

A Vue.js blueprint for JHipster. It will use Vue.js as the frontend library!
https://www.jhipster.tech
Apache License 2.0
301 stars 179 forks source link

Pages are blinking in browser. Leaves artifacts #591

Closed artem-korolev closed 4 years ago

artem-korolev commented 4 years ago
Overview of the issue

In frontend. Whenever I refresh a page in browser. It blinks very fast. But I can see messages like "error 403", "you are not logged in", then it shows Login form, and after that it already shows the actual page. And what is most problematic - it leaves artifacts after that. For example, this browser username popup box from login form - https://imgur.com/gdZ22hC

And blinking in general is quite bad UX. all text on the page is shown first as translation tags. and only after that it translates them. It also can be notices when you refresh page, or open page in browser first time.

Its happening not in all pages. And its blinking differently. For example on Home page I don't get "403"-message, "not authorized" and login form, but I can see first home page variant when I'm not logged, and then I'm getting real home page (logged in).

For some reason after several site navigation events, Its not happening on my custom page. But its still a case for Entities pages. And I don't know how to avoid it.

And sometimes it even stucks in "Login dialog". But thats really should not be, because I'm already logged in. And if I refresh page again, then login dialog disapears.

Motivation for or Use Case

It is bad for UX, thats why Im raising this issue. And I think in general its a bug. There is no reason to show 3 different pages ("403 error", "you are not logger in", "login dialog), because I'm actually logged in.

Reproduce the error
jhipster --blueprints vuejs

Use Firefox browser

Suggest a Fix

If you know what causing this in general, then I can try to fix it myself. I just found this issue. I can say for sure its vuejs blueprint issue

JHipster Version(s)

6.8.0

JHipster configuration

there is nothing special. Its clean installation of khipster with vuejs blueprint. Problem is in VueJS blueprint implementation issue

Browsers and Operating System

Windows 10. Firefox 74.0.1

pascalgrimaud commented 4 years ago

@artem-korolev : similar to https://github.com/jhipster/jhipster-vuejs/issues/587 ?

artem-korolev commented 4 years ago

@pascalgrimaud , yes. it is exactly same. Its only that I provided a bit more info. Don't how much sense it makes. In general it is same issue. Only that on Home page there is no "403, but there another page appears. Root cause of the issue is maybe the same.

pascalgrimaud commented 4 years ago

Fixed by https://github.com/jhipster/jhipster-vuejs/pull/590