[Android] Temporarily disable animations for performance reasons

#126

pmndrs/react-spring#570

Author: brunolemos

packages/components/src/components/buttons/GitHubLoginButton.tsx

@@ -114,8 +114,12 @@ export function GitHubLoginButton(props: GitHubLoginButtonProps) {
 
   function getStyles() {
     const { isHovered, isPressing, theme } = cacheRef.current
+
+    const immediate = Platform.realOS === 'android'
+
     return {
-      config: { duration: 100 },
+      config: { duration: immediate ? 0 : 100 },
+      immediate,
       backgroundColor:
         isHovered || isPressing
           ? theme.backgroundColorLess2

packages/components/src/components/columns/ColumnHeaderItem.tsx

@@ -6,6 +6,7 @@ import { useSpring } from 'react-spring/native'
 import { GitHubIcon, ThemeColors } from '@devhub/core'
 import { useHover } from '../../hooks/use-hover'
 import { useReduxState } from '../../hooks/use-redux-state'
+import { Platform } from '../../libs/platform'
 import * as selectors from '../../redux/selectors'
 import {
   columnHeaderItemContentSize,
@@ -109,10 +110,13 @@ export const ColumnHeaderItem = React.memo((props: ColumnHeaderItemProps) => {
     const { isHovered: _isHovered, theme } = cacheRef.current
 
     const isHovered = (_isHovered || forceHoverState) && !disabled
-    const immediate = !!(enableForegroundHover && !enableBackgroundHover)
+    const immediate =
+      Platform.realOS === 'android' ||
+      !!(enableForegroundHover && !enableBackgroundHover)
 
     return {
       config: { duration: immediate ? 0 : 100 },
+      immediate,
       backgroundColor:
         isHovered && enableBackgroundHover
           ? theme[hoverBackgroundThemeColor || 'backgroundColorLess1']

packages/components/src/components/columns/ColumnOptionsRenderer.tsx

@@ -28,13 +28,16 @@ export const ColumnOptionsRenderer = React.memo(
     const springAnimatedTheme = useCSSVariablesOrSpringAnimatedTheme()
     const { sizename } = useAppLayout()
 
+    const immediate = Platform.realOS === 'android'
+
     const overlayTransition = useTransition<boolean, any>(
       visible ? [true] : [],
       () => 'column-options-overlay',
       {
         reset: true,
         unique: true,
-        config: { duration: 400, precision: 0.01 },
+        config: { duration: immediate ? 0 : 400, precision: 0.01 },
+        immediate,
         from: { opacity: 0 },
         enter: { opacity: 0.75 },
         leave: { opacity: 0 },

packages/components/src/components/columns/ColumnOptionsRow.tsx

@@ -86,9 +86,11 @@ export function ColumnOptionsRow(props: ColumnOptionsRowProps) {
 
   function getStyles() {
     const { isHovered, isPressing, theme } = cacheRef.current
+    const immediate = Platform.realOS === 'android'
 
     return {
-      config: { duration: 100 },
+      config: { duration: immediate ? 0 : 100 },
+      immediate,
       backgroundColor:
         isHovered || isPressing || isOpen
           ? theme[getColumnHeaderThemeColors(theme.backgroundColor).hover]

packages/components/src/components/columns/Columns.tsx

@@ -11,6 +11,7 @@ import { Omit } from '@devhub/core'
 import { ColumnContainer } from '../../containers/ColumnContainer'
 import { useEmitter } from '../../hooks/use-emitter'
 import { bugsnag } from '../../libs/bugsnag'
+import { Platform } from '../../libs/platform'
 import { separatorTickSize } from '../common/Separator'
 import { useColumnWidth } from '../context/ColumnWidthContext'
 import { useAppLayout } from '../context/LayoutContext'

packages/components/src/components/common/AccordionView.tsx

@@ -22,7 +22,10 @@ export const AccordionView = React.memo((props: AccordionViewProps) => {
 
   const [size, setSize] = useState<number | 'auto'>(0)
 
+  const immediate = Platform.realOS === 'android'
+
   const animatedStyles = useSpring<any>({
+    immediate,
     from: { height: 0 },
     to: { height: isOpen ? size : 0 },
   })

packages/components/src/components/common/Button.tsx

@@ -85,8 +85,11 @@ export const Button = React.memo((props: ButtonProps) => {
   function getStyles() {
     const { isHovered, isPressing, theme } = cacheRef.current
 
+    const immediate = Platform.realOS === 'android'
+
     return {
-      config: { duration: 100 },
+      config: { duration: immediate ? 0 : 100 },
+      immediate,
       activityIndicatorColor: theme.foregroundColor,
       touchableBorderColor: backgroundColor
         ? backgroundColor

packages/components/src/components/modals/AddColumnModal.tsx

@@ -213,9 +213,11 @@ function AddColumnModalItem({
 
   function getStyles() {
     const { isHovered, isPressing, theme } = cacheRef.current
+    const immediate = Platform.realOS === 'android'
 
     return {
-      config: { duration: 100 },
+      config: { duration: immediate ? 0 : 100 },
+      immediate,
       backgroundColor:
         (isHovered || isPressing) && !disabled
           ? theme.backgroundColorLess1

packages/components/src/components/modals/ModalRenderer.tsx

@@ -104,11 +104,12 @@ export function ModalRenderer(props: ModalRendererProps) {
   }, [!!currentOpenedModal])
 
   const immediate =
-    sizename === '1-small' &&
+    Platform.realOS === 'android' ||
+    (sizename === '1-small' &&
     ((isSettings && !previouslyOpenedModal) ||
       (!currentOpenedModal && wasSettings))
       ? true
-      : false
+      : false)
 
   const size = columnWidth + (renderSeparator ? separatorTickSize : 0)
 

packages/components/src/containers/ColumnsContainer.tsx

@@ -8,5 +8,6 @@ export interface ColumnsContainerProps {}
 
 export function ColumnsContainer() {
   const columnIds = useReduxState(selectors.columnIdsSelector)
+
   return <Columns key="columns-container" columnIds={columnIds} />
 }