Changed vuex acion name

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Null sidebar menu data on static page fixed - @filrak (#2456)
 - Fix cannot edit previous steps in checkout - @filrak (#2457)
 - Fixed route guard ssr problem - @vue-kacper (#2364)
+- Improve images loading on category page, corrected alt view and blinking problem - @patzick (#2465)
 
 ## [1.8.2] - 2019.02.11
 - Fixed docker-compose configuration for network_mode and TS build config - @lukeromanowicz (#2415)

core/modules/user/hooks/afterRegistration.ts

@@ -4,7 +4,7 @@ import * as types from './../store/mutation-types'
 export function afterRegistration({ Vue, config, store, isServer }){
   if (!isServer) {
     store.dispatch('user/startSession')
-    store.dispatch('user/loadUserEarly')
+    store.dispatch('user/loadFromCache')
 
     Vue.prototype.$bus.$on('user-before-logout', () => {
       store.dispatch('user/logout', { silent: false })

core/modules/user/store/actions.ts

@@ -47,7 +47,7 @@ const actions: ActionTree<UserState, RootState> = {
   /**
    * Retrieve authenticated user from browser cache synchronously
    */
-  loadUserEarly (context) {
+  loadFromCache (context) {
     const storeView = currentStoreView()
     const dbNamePrefix = storeView.storeCode ? storeView.storeCode + '-' : ''
     const user = localStorage.getItem(`${dbNamePrefix}shop/user/current-user`);

src/themes/default/components/core/ProductTile.vue

@@ -17,14 +17,15 @@
     >
       <div
         class="product-image relative bg-cl-secondary"
-        :class="[{ sale: labelsActive && isOnSale }, { new: labelsActive && isNew }]">
+        :class="[{ sale: labelsActive && isOnSale }, { new: labelsActive && isNew }, {'product-image--loaded': imageLoaded}]">
         <img
+          class="product-image__content"
           :alt="product.name"
           :src="thumbnailObj.src"
-          v-lazy="thumbnailObj"
           height="300"
           width="310"
           data-testid="productImage"
+          @load="imageLoaded = true"
         >
       </div>
 
@@ -62,6 +63,11 @@ import { ProductTile } from '@vue-storefront/core/modules/catalog/components/Pro
 
 export default {
   mixins: [ProductTile],
+  data () {
+    return {
+      imageLoaded: false
+    }
+  },
   props: {
     labelsActive: {
       type: Boolean,
@@ -146,6 +152,25 @@ $color-white: color(white);
   width: 100%;
   overflow: hidden;
   max-height: 300px;
+  height: 270px;
+  display: flex;
+  align-items: flex-end;
+  background-image: url('/assets/placeholder.svg');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 60% auto;
+
+  &__content {
+    display: none;
+  }
+
+  &--loaded {
+    background-image: none;
+
+    .product-image__content {
+      display: block;
+    }
+  }
 
   &:hover {
     img {