Flashing icons without styles on load

[Milos Dakic]

Awesome work on this template. I loved how simple it was to get started with.

I've been experiencing flashing of content without styles on load. I tried the usual Vue tricks to prevent it but doesn't seem to work. Is there anything you guys can recommend?

[Milos Dakic]

Sorry, found the solution.

[Lars Janssen]

@milosdakic how did you fix it?

[Sergej]

The icon flashing can happen during development because there is no CSS file emitted by webpack and the webpack bundle inserts the style tag during script execution. In production the CSS file is emitted and loaded inside the head tag, so there shouldn't be any problems.

If it's something that bothers you during development, you can adjust the webpack.dev.js file to emmit a CSS file instead of loading it with style-loader (Basically how it's done in webpack.prod.js):

1. Import the mini-css-extract-plugin at the top of the file: const MiniCssExtractPlugin = require('mini-css-extract-plugin')
2. Replace 'style-loader' with MiniCssExtractPlugin.loader in the rules section
3. add MiniCssExtractPlugin to the array of plugins:

plugins: [
  ...
  new MiniCssExtractPlugin({
    filename: './bundle.css',
    chunkFilename: '[id].css'
  }),
  ...
]

[Lars Janssen]

@sergejcodes thanks!

[Lars Janssen]

@sergejcodes hey! I still got this problem with a live-site on shopify https://snuffelbox.nl/. Any idea how I can fix this?

[Sergej]

Hi 👋,

I just clicked through your site and all icons seem to be fine, no issues here. I'm on the latest Chrome version. You have to be a bit more specific. One thing you could try is to add an initial fixed width and height to your svgs like this:

<svg width="24" height="24" viewBox="0 0 24 24" >...</svg>

[Lars Janssen]

Hey! Thanks for the quick reply, much appreciated! I've deployed to production and now it's working indeed. One other issue I have everytime I push to production with: npm run deploy:live -- --allow-live it's overwriting my configured shopify images. Any idea why that's happening?

[Sergej]

Do you mean images you set through the Shopify theme editor? If yes, you should run npm run settings:live to download the latest live settings_data.json file before deploying.

By default, the deploy task overrides everything on the remote store, so you have to download the settings file if someone makes separate adjustments on the live store which differ from the dev store.

Depending on your workflow you could incorporate a CI/CD workflow that does exactly that (described in the Shopify Theme Lab readme) and/or Shopify Settings Control for backing up the live settings_data.json to prevent data loss.

[Lars Janssen]

Thanks