Add debounce to resize event

public/ads.json → public/marketing.json

@@ -1,19 +1,19 @@
 [
   {
     "title": "JOIN AIRDROP",
-    "img": "/ads/synths.png",
+    "img": "/marketing/synths.png",
     "backgroundColor": "var(--s-color-theme-accent)",
     "link": "https://gleam.io/zHQmD/polkaswap-34000-xst-airdrop-campaign"
   },
   {
     "title": "GET SORA CARD",
-    "img": "/ads/card.png",
+    "img": "/marketing/card.png",
     "backgroundColor": "#F8087B",
     "link": "/#/card"
   },
   {
     "title": "LEARN ABOUT SYNTHETICS",
-    "img": "/ads/synths.png",
+    "img": "/marketing/synths.png",
     "backgroundColor": "var(--s-color-theme-accent)",
     "link": "https://medium.com/polkaswap/unveiling-synthetic-assets-a-game-changer-in-the-financial-landscape-1720e5858422"
   }

src/App.vue

@@ -36,6 +36,7 @@
 
 <script lang="ts">
 import { api, connection, components, mixins, settingsStorage, AlertsApiService } from '@soramitsu/soraneo-wallet-web';
+import debounce from 'lodash/debounce';
 import { Component, Mixins, Watch } from 'vue-property-decorator';
 
 import axiosInstance, { updateBaseUrl, getFullBaseUrl } from '@/api';
@@ -201,6 +202,8 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
     this.setScreenBreakpointClass(this.responsiveClass);
   }
 
+  private setResponsiveClassDebounced = debounce(this.setResponsiveClass, 250);
+
   async created() {
     // [DESKTOP] To Enable Desktop
     // this.setIsDesktop(true);
@@ -248,7 +251,7 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   }
 
   mounted(): void {
-    window.addEventListener('resize', this.setResponsiveClass);
+    window.addEventListener('resize', this.setResponsiveClassDebounced);
   }
 
   private get isSwapPageWithCharts(): boolean {
@@ -334,7 +337,7 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   }
 
   async beforeDestroy(): Promise<void> {
-    window.removeEventListener('resize', this.setResponsiveClass);
+    window.removeEventListener('resize', this.setResponsiveClassDebounced);
     await this.resetInternalSubscriptions();
     await this.resetNetworkSubscriptions();
     this.resetBlockNumberSubscription();

src/components/App/Header/AppHeader.vue

@@ -3,7 +3,7 @@
     <s-button class="app-menu-button" type="action" primary icon="basic-more-horizontal-24" @click="toggleMenu" />
     <app-logo-button class="app-logo--header" responsive :theme="libraryTheme" @click="goTo(PageNames.Swap)" />
     <div class="app-controls app-controls--middle s-flex">
-      <app-ad v-show="!isMobile" />
+      <app-marketing v-show="!isMobile" />
       <s-button :class="fiatBtnClass" :type="fiatBtnType" size="medium" @click="goTo(PageNames.FiatDepositOptions)">
         <pair-token-logo class="payment-icon" :first-token="xor" :second-token="eth" :size="fiatBtnSize" />
         <span v-if="!isAnyMobile">{{ t('moonpay.buttons.buy') }}</span>
@@ -29,17 +29,17 @@ import { lazyComponent, goTo } from '../../../router';
 import { state, getter } from '../../../store/decorators';
 
 import AppAccountButton from './AppAccountButton.vue';
-import AppAd from './AppAd.vue';
 import AppHeaderMenu from './AppHeaderMenu.vue';
 import AppLogoButton from './AppLogoButton.vue';
+import AppMarketing from './AppMarketing.vue';
 
 import type Theme from '@soramitsu/soramitsu-js-ui/lib/types/Theme';
 
 @Component({
   components: {
     PolkaswapLogo,
     AppAccountButton,
-    AppAd,
+    AppMarketing,
     AppHeaderMenu,
     AppLogoButton,
     SelectLanguageDialog: lazyComponent(Components.SelectLanguageDialog),
@@ -174,7 +174,7 @@ export default class AppHeader extends Mixins(WalletConnectMixin) {
     @include desktop {
       position: absolute;
       top: 50%;
-      left: 42.5%; // Because of ad banner
+      left: 42.5%; // Because of marketing banner
       transform: translate(-50%, -50%);
       margin-right: 0;
     }

src/components/App/Header/AppAd.vue → src/components/App/Header/AppMarketing.vue

@@ -1,28 +1,28 @@
 <template>
-  <div v-if="adsArray.length" class="ad s-flex">
-    <span class="ad-prev" @click="prev()">
+  <div v-if="adsArray.length" class="marketing s-flex">
+    <span class="marketing-prev" @click="prev()">
       <s-icon name="arrows-chevron-left-rounded-24" />
     </span>
-    <transition-group tag="div" class="ad-slider" :name="transitionName">
+    <transition-group tag="div" class="marketing-slider" :name="transitionName">
       <template v-for="(ad, index) in adsArray">
         <div v-if="currentIndex === index" :key="ad.title">
           <a
-            class="ad-card"
+            class="marketing-card"
             rel="nofollow noopener"
             :target="getTarget(ad.link)"
             :style="getStyles(ad)"
             :href="ad.link"
           >
-            <span class="ad-text">
+            <span class="marketing-text">
               {{ ad.title }}
-              <s-icon class="ad-suffix" name="arrows-arrow-top-right-24" size="16px" />
+              <s-icon class="marketing-suffix" name="arrows-arrow-top-right-24" size="16px" />
             </span>
-            <span class="ad-image" />
+            <span class="marketing-image" />
           </a>
         </div>
       </template>
     </transition-group>
-    <span class="ad-next" @click="next()">
+    <span class="marketing-next" @click="next()">
       <s-icon name="arrows-chevron-right-rounded-24" />
     </span>
   </div>
@@ -35,18 +35,17 @@ import { Component, Mixins } from 'vue-property-decorator';
 import { state } from '@/store/decorators';
 import type { Ad } from '@/store/settings/types';
 
+// PS. Do not call this component & css classes like ad/ads -> it'll be blocked by any blocker browser extension
 @Component
-export default class AppAd extends Mixins(mixins.TranslationMixin) {
+export default class AppMarketing extends Mixins(mixins.TranslationMixin) {
   @state.settings.adsArray adsArray!: Array<Ad>;
 
   private interval: Nullable<NodeJS.Timeout> = null;
   currentIndex = 0;
   transitionName = 'slide';
 
   mounted(): void {
-    this.interval = setInterval(() => {
-      this.next();
-    }, 60_000);
+    this.interval = setInterval(this.next, 60_000);
   }
 
   beforeDestroy(): void {
@@ -71,7 +70,7 @@ export default class AppAd extends Mixins(mixins.TranslationMixin) {
 
     this.transitionName = 'slideback';
     if (this.currentIndex <= 0) {
-      this.currentIndex = this.adsArray.length - 1; // last ad
+      this.currentIndex = this.adsArray.length - 1; // last item
     } else {
       this.currentIndex--;
     }
@@ -82,7 +81,7 @@ export default class AppAd extends Mixins(mixins.TranslationMixin) {
 
     this.transitionName = 'slide';
     if (this.currentIndex >= this.adsArray.length - 1) {
-      this.currentIndex = 0; // first ad
+      this.currentIndex = 0; // first item
     } else {
       this.currentIndex++;
     }
@@ -93,7 +92,7 @@ export default class AppAd extends Mixins(mixins.TranslationMixin) {
 <style lang="scss" scoped>
 $ad-width: 280px;
 $max-ad-width: 330px;
-.ad {
+.marketing {
   position: relative;
   width: $ad-width;
   &-prev,
@@ -152,9 +151,6 @@ $max-ad-width: 330px;
   &-image {
     flex: 1;
   }
-  @include desktop {
-    width: $ad-width;
-  }
   @media (minmax(1220px, false)) {
     width: $max-ad-width;
   }

src/store/settings/actions.ts

@@ -218,7 +218,7 @@ const actions = defineActions({
   async fetchAdsArray(context): Promise<void> {
     const { commit } = settingsActionContext(context);
     try {
-      const { data } = await axiosInstance.get('/ads.json');
+      const { data } = await axiosInstance.get('/marketing.json');
       commit.setAdsArray(data);
     } catch {
       commit.setAdsArray([]);