Skip to content
Snippets Groups Projects
Commit 87088faa authored by Jan Ole Schmidt's avatar Jan Ole Schmidt
Browse files

Merge branch 'HOLI-10913-loading-state-out-of-viewport-for-notification-settings' into 'main' 

HOLI-10913: Loading state out of viewport for notification settings

See merge request app/holi-frontends!3077
parents 675b7d75 00f1fc08
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
core/screens/notifications/components/NotificationSettingsList.tsx
+ 25
− 9
View file @ 87088faa
import groupBy from 'lodash.groupby'
import React, { useMemo } from 'react'
import type React from 'react'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { ScrollView, StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
import { ScrollView, type StyleProp, StyleSheet, useWindowDimensions, View, type ViewStyle } from 'react-native'
import { FeatureFlagKey } from '@holi/core/featureFlags/constants'
import { useFeatureFlagWithMaintenance } from '@holi/core/featureFlags/hooks/useFeatureFlagWithMaintenance'
......@@ -9,8 +10,8 @@ import NotificationSettingsMaintenance from '@holi/core/screens/notifications/co
import {
Category,
Channel,
NotificationWorkflow,
UpdateWorkflowPreference,
type NotificationWorkflow,
type UpdateWorkflowPreference,
useNotificationPreferences,
} from '@holi/core/screens/notifications/hooks/useNotificationPreferences'
import HoliColumn from '@holi/ui/components/atoms/HoliColumn'
......@@ -24,9 +25,10 @@ import HoliCheckbox from '@holi/ui/components/molecules/HoliCheckbox'
import HoliLoader from '@holi/ui/components/molecules/HoliLoader'
import HoliRoundedSection from '@holi/ui/components/molecules/HoliRoundedSection'
import Spacing from '@holi/ui/foundations/Spacing'
import { HoliTheme, useTheme } from '@holi/ui/styles/theme'
import { type HoliTheme, useTheme } from '@holi/ui/styles/theme'
import useTracking from '@holi/core/tracking/hooks/useTracking'
import { TrackingEvent } from '@holi/core/tracking'
import { dimensions } from '@holi/ui/styles/globalVars'
const CATEGORY_ILLUSTRATIONS = {
GLOBAL: require('@holi/ui/assets/img/illustrations/illustration_bell.svg'),
......@@ -47,7 +49,8 @@ const NOTIFICATION_CATEGORIES_IN_ORDER: NOTIFICATION_CATEGORY[] = [
const NotificationSettingsList = () => {
const { t } = useTranslation()
const { theme } = useTheme()
const styles = useMemo(() => getStyles(theme), [theme])
const { width: screenWidth } = useWindowDimensions()
const styles = useMemo(() => getStyles(theme, screenWidth), [theme, screenWidth])
const notificationsFeatureFlag = useFeatureFlagWithMaintenance(FeatureFlagKey.NOTIFICATIONS)
const { workflowPreferences, updatePreference, updatingPreferences, loading } = useNotificationPreferences()
......@@ -71,7 +74,12 @@ const NotificationSettingsList = () => {
return (
<ScrollView style={styles.scrollView}>
<HoliContainer noPadding>
{updatingPreferences && <HoliLoader />}
{updatingPreferences && (
<View style={styles.loaderContainer}>
<HoliLoader />
</View>
)}
{NOTIFICATION_CATEGORIES_IN_ORDER.map((category, index) => {
const workflows = workflowsByCategory[category]
if (!workflows) {
......@@ -145,7 +153,8 @@ const WorkflowSettings = ({
}) => {
const { t } = useTranslation()
const { theme } = useTheme()
const styles = useMemo(() => getStyles(theme), [theme])
const { width: screenWidth } = useWindowDimensions()
const styles = useMemo(() => getStyles(theme, screenWidth), [theme, screenWidth])
const { track } = useTracking()
const workflowName = t(`profile.settings.notifications.workflow.${workflow.id}`)
......@@ -221,7 +230,7 @@ const CategoryIllustration: React.FC<{ style?: ViewStyle; category: NOTIFICATION
export default NotificationSettingsList
const getStyles = (theme: HoliTheme) =>
const getStyles = (theme: HoliTheme, screenWidth: number) =>
StyleSheet.create({
scrollView: {
backgroundColor: theme.colors.background20,
......@@ -243,4 +252,11 @@ const getStyles = (theme: HoliTheme) =>
lastSection: {
marginBottom: 24,
},
loaderContainer: {
position: 'absolute',
top: screenWidth > dimensions.breakpointS ? '25%' : '20%',
left: 0,
right: 0,
zIndex: 1,
},
})
core/screens/notifications/components/__tests__/__snapshots__/NotificationSettingsList.test.tsx.snap
+ 92
− 80
View file @ 87088faa
......@@ -2082,104 +2082,116 @@ exports[`NotificationSettingsList should correctly render updating state 1`] = `
testID="holi-container"
>
<View
collapsable={false}
entering={
FadeIn {
"build": [Function],
"callbackV": undefined,
"dampingRatioV": undefined,
"dampingV": undefined,
"delayV": 0,
"durationV": undefined,
"easingV": undefined,
"initialValues": undefined,
"massV": undefined,
"overshootClampingV": undefined,
"randomizeDelay": false,
"reduceMotionV": "system",
"restDisplacementThresholdV": undefined,
"restSpeedThresholdV": undefined,
"rotateV": undefined,
"stiffnessV": undefined,
"type": undefined,
}
}
exiting={
FadeOut {
"build": [Function],
"callbackV": undefined,
"dampingRatioV": undefined,
"dampingV": undefined,
"delayV": undefined,
"durationV": undefined,
"easingV": undefined,
"initialValues": undefined,
"massV": undefined,
"overshootClampingV": undefined,
"randomizeDelay": false,
"reduceMotionV": "system",
"restDisplacementThresholdV": undefined,
"restSpeedThresholdV": undefined,
"rotateV": undefined,
"stiffnessV": undefined,
"type": undefined,
}
}
jestAnimatedStyle={
{
"value": {},
}
}
style={
{
"alignItems": "center",
"backgroundColor": "transparent",
"bottom": 0,
"justifyContent": "center",
"left": 0,
"paddingHorizontal": 16,
"position": "absolute",
"right": 0,
"top": 0,
"zIndex": 9999,
"top": "25%",
"zIndex": 1,
}
}
>
<View
collapsable={false}
entering={
FadeIn {
"build": [Function],
"callbackV": undefined,
"dampingRatioV": undefined,
"dampingV": undefined,
"delayV": 0,
"durationV": undefined,
"easingV": undefined,
"initialValues": undefined,
"massV": undefined,
"overshootClampingV": undefined,
"randomizeDelay": false,
"reduceMotionV": "system",
"restDisplacementThresholdV": undefined,
"restSpeedThresholdV": undefined,
"rotateV": undefined,
"stiffnessV": undefined,
"type": undefined,
}
}
exiting={
FadeOut {
"build": [Function],
"callbackV": undefined,
"dampingRatioV": undefined,
"dampingV": undefined,
"delayV": undefined,
"durationV": undefined,
"easingV": undefined,
"initialValues": undefined,
"massV": undefined,
"overshootClampingV": undefined,
"randomizeDelay": false,
"reduceMotionV": "system",
"restDisplacementThresholdV": undefined,
"restSpeedThresholdV": undefined,
"rotateV": undefined,
"stiffnessV": undefined,
"type": undefined,
}
}
jestAnimatedStyle={
{
"value": {},
}
}
style={
{
"height": 64,
"width": 64,
"alignItems": "center",
"backgroundColor": "transparent",
"bottom": 0,
"justifyContent": "center",
"left": 0,
"paddingHorizontal": 16,
"position": "absolute",
"right": 0,
"top": 0,
"zIndex": 9999,
}
}
>
<LottieAnimationView
autoPlay={true}
cacheComposition={true}
colorFilters={[]}
enableMergePathsAndroidForKitKatAndAbove={false}
loop={true}
onAnimationFailure={[Function]}
onAnimationFinish={[Function]}
onAnimationLoaded={[Function]}
progress={0}
resizeMode="contain"
sourceJson="{"v":"5.8.1","fr":60,"ip":22,"op":172,"w":128,"h":128,"nm":"Preloader","ddd":0,"assets":[{"id":"comp_0","nm":"Blob","fr":60,"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[65,64,0],"ix":2,"l":2},"a":{"a":0,"k":[-6.242,8.26,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":1,"k":[{"i":{"x":[0,0],"y":[1,1]},"o":{"x":[0.4,0.4],"y":[0,0]},"t":31,"s":[10,10]},{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"t":92,"s":[25.516,52.52]},{"i":{"x":[0.17,0.6],"y":[0.971,1]},"o":{"x":[0.4,0.4],"y":[0,0]},"t":118,"s":[25.516,52.52]},{"t":151,"s":[10,10]}],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":108,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.38431372549,0.403921568627,0.905882352941,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-36.242,8.26],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":300,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Blob","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[124,64,0],"ix":2,"l":2},"a":{"a":0,"k":[64,64,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":128,"h":128,"ip":18,"op":318,"st":18,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"Blob","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[94,64,0],"ix":2,"l":2},"a":{"a":0,"k":[64,64,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":128,"h":128,"ip":9,"op":309,"st":9,"bm":0},{"ddd":0,"ind":3,"ty":0,"nm":"Blob","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[64,64,0],"ix":2,"l":2},"a":{"a":0,"k":[64,64,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":128,"h":128,"ip":0,"op":300,"st":0,"bm":0}],"markers":[]}"
speed={1}
<View
style={
{
"aspectRatio": 1,
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
"height": 64,
"width": 64,
}
}
textFiltersAndroid={[]}
textFiltersIOS={[]}
useNativeLooping={false}
/>
>
<LottieAnimationView
autoPlay={true}
cacheComposition={true}
colorFilters={[]}
enableMergePathsAndroidForKitKatAndAbove={false}
loop={true}
onAnimationFailure={[Function]}
onAnimationFinish={[Function]}
onAnimationLoaded={[Function]}
progress={0}
resizeMode="contain"
sourceJson="{"v":"5.8.1","fr":60,"ip":22,"op":172,"w":128,"h":128,"nm":"Preloader","ddd":0,"assets":[{"id":"comp_0","nm":"Blob","fr":60,"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[65,64,0],"ix":2,"l":2},"a":{"a":0,"k":[-6.242,8.26,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":1,"k":[{"i":{"x":[0,0],"y":[1,1]},"o":{"x":[0.4,0.4],"y":[0,0]},"t":31,"s":[10,10]},{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"t":92,"s":[25.516,52.52]},{"i":{"x":[0.17,0.6],"y":[0.971,1]},"o":{"x":[0.4,0.4],"y":[0,0]},"t":118,"s":[25.516,52.52]},{"t":151,"s":[10,10]}],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":108,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.38431372549,0.403921568627,0.905882352941,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-36.242,8.26],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":300,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Blob","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[124,64,0],"ix":2,"l":2},"a":{"a":0,"k":[64,64,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":128,"h":128,"ip":18,"op":318,"st":18,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"Blob","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[94,64,0],"ix":2,"l":2},"a":{"a":0,"k":[64,64,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":128,"h":128,"ip":9,"op":309,"st":9,"bm":0},{"ddd":0,"ind":3,"ty":0,"nm":"Blob","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[64,64,0],"ix":2,"l":2},"a":{"a":0,"k":[64,64,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":128,"h":128,"ip":0,"op":300,"st":0,"bm":0}],"markers":[]}"
speed={1}
style={
{
"aspectRatio": 1,
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
textFiltersAndroid={[]}
textFiltersIOS={[]}
useNativeLooping={false}
/>
</View>
</View>
</View>
<View
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment