Skip to content

Commit 2b7fe31

Browse files
CedrikNikitaCedrikNikita
committed
chore: disable page/modal transitions in Chrome based browsers
1 parent fc957d1 commit 2b7fe31

File tree

10 files changed

+46
-11
lines changed

10 files changed

+46
-11
lines changed

‎src/constants/environment.ts

+2
Original file line numberDiff line numberDiff line change
@@ -74,3 +74,5 @@ export const ETHERSCAN_API_KEY = process.env.ETHERSCAN_API_KEY!;
7474
export const ETHPLORER_API_KEY = process.env.ETHPLORER_API_KEY!;
7575

7676
export const WALLET_CONNECT_PROJECT_ID = process.env.WALLET_CONNECT_PROJECT_ID!;
77+
78+
export const IS_TRANSITIONS_DISABLED = IS_CHROME_BASED && IS_WEB;

‎src/popup/App.vue

+4-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
-->
3737
<IonRouterOutlet
3838
v-show="showRouter"
39-
:animated="!RUNNING_IN_TESTS && !IS_FIREFOX"
39+
:animated="!RUNNING_IN_TESTS && !IS_FIREFOX && !IS_TRANSITIONS_DISABLED"
4040
:class="{ 'show-header': showHeader, ios: IS_IOS }"
4141
class="main"
4242
/>
@@ -83,6 +83,7 @@ import { WalletRouteMeta } from '@/types';
8383
import {
8484
APP_LINK_FIREFOX,
8585
APP_LINK_CHROME,
86+
IS_TRANSITIONS_DISABLED,
8687
IS_WEB,
8788
IS_IOS,
8889
IS_MOBILE_DEVICE,
@@ -298,12 +299,14 @@ export default defineComponent({
298299
});
299300
300301
return {
302+
IS_CHROME_BASED,
301303
IS_FIREFOX,
302304
IS_IOS,
303305
IS_WEB,
304306
IS_EXTENSION,
305307
IS_MOBILE_APP,
306308
IS_MOBILE_DEVICE,
309+
IS_TRANSITIONS_DISABLED,
307310
RUNNING_IN_TESTS,
308311
isAuthenticated,
309312
isLoaderVisible,

‎src/popup/components/AccountDetailsBase.vue

+3-1
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080
<!-- We are disabling animations on FF because of a bug that causes flickering
8181
see: https://github.com/ionic-team/ionic-framework/issues/26620 -->
8282
<IonRouterOutlet
83-
:animated="!IS_FIREFOX"
83+
:animated="!IS_FIREFOX && !IS_TRANSITIONS_DISABLED"
8484
:animation="fadeAnimation"
8585
/>
8686
</div>
@@ -103,6 +103,7 @@ import {
103103
ACCOUNT_TYPES,
104104
IS_MOBILE_APP,
105105
IS_FIREFOX,
106+
IS_TRANSITIONS_DISABLED,
106107
MODAL_PRIVATE_KEY_EXPORT,
107108
PROTOCOLS,
108109
} from '@/constants';
@@ -225,6 +226,7 @@ export default defineComponent({
225226
exportPrivateKey,
226227
ACCOUNT_TYPES,
227228
IS_FIREFOX,
229+
IS_TRANSITIONS_DISABLED,
228230
INITIAL_TABS_HEIGHT,
229231
PROTOCOLS,
230232
};

‎src/popup/components/AccountInfo.vue

+3-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
<template
3232
v-else-if="name"
3333
>
34-
<ion-skeleton-text v-if="isLoading" animated />
34+
<ion-skeleton-text v-if="!IS_TRANSITIONS_DISABLED && isLoading" animated />
3535
<Truncate v-if="!isLoading" class="account-name" :str="name" />
3636
</template>
3737
<template
@@ -83,6 +83,7 @@ import { getDefaultAccountLabel } from '@/utils';
8383
import { ProtocolAdapterFactory } from '@/lib/ProtocolAdapterFactory';
8484
import { useAeNames } from '@/protocols/aeternity/composables/aeNames';
8585
import { useAccounts } from '@/composables';
86+
import { IS_TRANSITIONS_DISABLED } from '@/constants';
8687
8788
import Avatar, { type AvatarSize } from '@/popup/components/Avatar.vue';
8889
import CopyText from '@/popup/components/CopyText.vue';
@@ -148,6 +149,7 @@ export default defineComponent({
148149
);
149150
150151
return {
152+
IS_TRANSITIONS_DISABLED,
151153
name: resolvedChainName.value || name,
152154
type,
153155
address,

‎src/popup/components/Avatar.vue

+3-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
alt="Avatar"
2222
@load="isLoading = false"
2323
>
24-
<ion-skeleton-text v-if="isLoading" animated />
24+
<ion-skeleton-text v-if="!IS_TRANSITIONS_DISABLED && isLoading" animated />
2525
</slot>
2626
</div>
2727
</template>
@@ -40,6 +40,7 @@ import { checkImageAvailability, getAddressColor } from '@/utils';
4040
import { AE_AVATAR_URL } from '@/protocols/aeternity/config';
4141
import { isContract } from '@/protocols/aeternity/helpers';
4242
import { useAeNetworkSettings } from '@/protocols/aeternity/composables';
43+
import { IS_TRANSITIONS_DISABLED } from '@/constants';
4344
4445
const SIZES = ['xs', 'sm', 'rg', 'md', 'lg', 'xl'] as const;
4546
export type AvatarSize = typeof SIZES[number];
@@ -95,6 +96,7 @@ export default defineComponent({
9596
});
9697
9798
return {
99+
IS_TRANSITIONS_DISABLED,
98100
srcUrl,
99101
calculatedColor,
100102
profileImageAvailable,

‎src/popup/components/DefaultPagesRouter.vue

+7-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
see: https://github.com/ionic-team/ionic-framework/issues/26620 -->
55

66
<IonRouterOutlet
7-
:animated="!RUNNING_IN_TESTS && !IS_FIREFOX"
7+
:animated="!RUNNING_IN_TESTS && !IS_FIREFOX && !IS_TRANSITIONS_DISABLED"
88
:animation="popInAnimation"
99
/>
1010
</IonPage>
@@ -15,7 +15,11 @@ import { defineComponent, onMounted, onUpdated } from 'vue';
1515
import { IonRouterOutlet, IonPage } from '@ionic/vue';
1616
import { useRoute } from 'vue-router';
1717
import { useUi } from '@/composables';
18-
import { RUNNING_IN_TESTS, IS_FIREFOX } from '@/constants';
18+
import {
19+
RUNNING_IN_TESTS,
20+
IS_FIREFOX,
21+
IS_TRANSITIONS_DISABLED,
22+
} from '@/constants';
1923
import { popInAnimation } from '@/popup/animations';
2024
import { ROUTE_ACCOUNT, ROUTE_MULTISIG_ACCOUNT } from '../router/routeNames';
2125
@@ -50,6 +54,7 @@ export default defineComponent({
5054
return {
5155
RUNNING_IN_TESTS,
5256
IS_FIREFOX,
57+
IS_TRANSITIONS_DISABLED,
5358
popInAnimation,
5459
};
5560
},

‎src/popup/components/Modal.vue

+14-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<transition
33
appear
4-
:name="fromBottom ? 'from-bottom-transition' : 'pop-in-transition'"
4+
:name="transitionName"
55
@after-enter="$emit('open')"
66
>
77
<div
@@ -91,7 +91,11 @@ import {
9191
} from 'vue';
9292
import { BackButtonEvent } from '@ionic/vue';
9393
94-
import { IS_FIREFOX, IS_EXTENSION } from '@/constants';
94+
import {
95+
IS_TRANSITIONS_DISABLED,
96+
IS_EXTENSION,
97+
IS_FIREFOX,
98+
} from '@/constants';
9599
import { useScrollConfig, useViewport } from '@/composables';
96100
97101
import BtnClose from './buttons/BtnClose.vue';
@@ -130,6 +134,13 @@ export default defineComponent({
130134
131135
const showHeader = computed(() => props.hasCloseButton || props.header || slots.header);
132136
137+
const transitionName = computed(() => {
138+
if (IS_TRANSITIONS_DISABLED) {
139+
return undefined;
140+
}
141+
return props.fromBottom ? 'from-bottom-transition' : 'pop-in-transition';
142+
});
143+
133144
function handleClose() {
134145
emit('close');
135146
}
@@ -163,6 +174,7 @@ export default defineComponent({
163174
IS_EXTENSION,
164175
scrollElem,
165176
showHeader,
177+
transitionName,
166178
};
167179
},
168180
});

‎src/popup/pages/Assets/AssetDetails.vue

+3-1
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181
<!-- We are disabling animations on FF because of a bug that causes flickering
8282
see: https://github.com/ionic-team/ionic-framework/issues/26620 -->
8383
<IonRouterOutlet
84-
:animated="!IS_FIREFOX"
84+
:animated="!IS_FIREFOX && !IS_TRANSITIONS_DISABLED"
8585
:animation="fadeAnimation"
8686
class="token-router"
8787
:style="{ height: routerHeight || '350px' }"
@@ -115,6 +115,7 @@ import {
115115
ICON_SIZES,
116116
IS_FIREFOX,
117117
IS_IOS,
118+
IS_TRANSITIONS_DISABLED,
118119
PROTOCOLS,
119120
UNFINISHED_FEATURES,
120121
} from '@/constants';
@@ -393,6 +394,7 @@ export default defineComponent({
393394
ICON_SIZES,
394395
IS_FIREFOX,
395396
IS_IOS,
397+
IS_TRANSITIONS_DISABLED,
396398
AE_DEX_URL,
397399
398400
BuyIcon,

‎src/popup/pages/Names/Auction.vue

+4
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717

1818
<IonRouterOutlet
1919
v-if="!isLoaderVisible"
20+
:animated="!IS_FIREFOX && !IS_TRANSITIONS_DISABLED"
2021
:animation="fadeAnimation"
2122
class="auction-router"
2223
:name="name"
@@ -46,6 +47,7 @@ import { fadeAnimation } from '@/popup/animations';
4647
import { aettosToAe } from '@/protocols/aeternity/helpers';
4748
import { useAeMiddleware } from '@/protocols/aeternity/composables';
4849
import { useAeNames } from '@/protocols/aeternity/composables/aeNames';
50+
import { IS_FIREFOX, IS_TRANSITIONS_DISABLED } from '@/constants';
4951
5052
import Tabs from '../../components/tabs/Tabs.vue';
5153
import Tab from '../../components/tabs/Tab.vue';
@@ -121,6 +123,8 @@ export default defineComponent({
121123
);
122124
123125
return {
126+
IS_FIREFOX,
127+
IS_TRANSITIONS_DISABLED,
124128
ROUTE_AUCTION_BID,
125129
ROUTE_AUCTION_HISTORY,
126130
isLoaderVisible,

‎src/protocols/aeternity/views/AccountDetailsNames.vue

+3-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
see: https://github.com/ionic-team/ionic-framework/issues/26620 -->
66
<IonRouterOutlet
77
v-if="isOnline"
8-
:animated="!IS_FIREFOX"
8+
:animated="!IS_FIREFOX && !IS_TRANSITIONS_DISABLED"
99
:animation="fadeAnimation"
1010
/>
1111
<MessageOffline
@@ -20,7 +20,7 @@
2020
<script lang="ts">
2121
import { IonRouterOutlet, IonPage } from '@ionic/vue';
2222
import { defineComponent } from 'vue';
23-
import { IS_FIREFOX } from '@/constants';
23+
import { IS_FIREFOX, IS_TRANSITIONS_DISABLED } from '@/constants';
2424
import { fadeAnimation } from '@/popup/animations';
2525
import { useConnection } from '@/composables';
2626
import MessageOffline from '@/popup/components/MessageOffline.vue';
@@ -37,6 +37,7 @@ export default defineComponent({
3737
return {
3838
isOnline,
3939
IS_FIREFOX,
40+
IS_TRANSITIONS_DISABLED,
4041
fadeAnimation,
4142
};
4243
},

0 commit comments

Comments
 (0)