Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Flash of Unstyled Content (FOUC) issue #156

Merged
merged 3 commits into from
May 24, 2024

Conversation

vishalkadam47
Copy link
Contributor

  • The addition of the v-cloak directive and the accompanying CSS rule will help to prevent the application from displaying partially loaded or unstyled content while it's loading.

  • The Flash of Unstyled Content (FOUC) is likely caused by the way the Vue.js application is initialized and rendered. The root cause is that the HTML content is rendered before the Vue.js application is mounted and the styles are applied.

@ehfd ehfd requested review from ehfd and PMohanJ and removed request for ehfd May 24, 2024 09:53
@ehfd ehfd changed the title fix Flash of Unstyled Content (FOUC) issue Fix Flash of Unstyled Content (FOUC) issue May 24, 2024
Copy link
Member

@PMohanJ PMohanJ left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Kindly make the changes as described.

@@ -123,12 +123,13 @@
word-wrap: normal;
direction: ltr;
}
body { background-color: #000000; }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Format the code as following:

body {
    background-color: #000000;
}

@@ -385,6 +386,9 @@
</div>
</v-app>
</div>
<style>
[v-cloak] { display: none; }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Include this style rule in the style tag of head section. Format it as following:

[v-cloak] {
      display: none; 
}

Copy link
Member

@PMohanJ PMohanJ left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks Good To Me.

@ehfd ehfd merged commit 63e40f9 into selkies-project:main May 24, 2024
@MohanJ02 MohanJ02 deleted the fix-FOUC branch May 27, 2024 05:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants