Skip to content

Commit

Permalink
Disable animations
Browse files Browse the repository at this point in the history
  • Loading branch information
@grubersjoe
grubersjoe committed Jan 26, 2025
1 parent 40a72e5 commit 1f48bfa
Show file tree
Hide file tree
Showing 12 changed files with 56 additions and 76 deletions.
68 changes: 26 additions & 42 deletions ...sets/ActivityCalendar.stories-rHG7qTMs.js → ...sets/ActivityCalendar.stories-DkYWSVXb.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/assets/Color-F6OSRLHC-Cz1thQGv.js → docs/assets/Color-F6OSRLHC-CkTmAL5L.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion .../assets/DocsRenderer-CFRXHY34-DjjBWroC.js → .../assets/DocsRenderer-CFRXHY34-CklMZvCo.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion docs/assets/entry-preview-CkHPUFIf.js → docs/assets/entry-preview-DYjJwf1y.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions docs/assets/iframe-7p8W5wZ9.js → docs/assets/iframe-DEBevBhh.js
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions docs/assets/index-DxcYfyHr.js → docs/assets/index-DtLGRM7V.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions docs/assets/preview-CYw24X-B.js → docs/assets/preview-D1ULdt9G.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion docs/assets/preview-Nox60-rB.js → docs/assets/preview-q_NaNgdH.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion docs/iframe.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -509,7 +509,7 @@
}
</script>

<script type="module" crossorigin src="./assets/iframe-7p8W5wZ9.js"></script>
<script type="module" crossorigin src="./assets/iframe-DEBevBhh.js"></script>
</head>

<body>
Expand Down
2 changes: 1 addition & 1 deletion docs/project.json
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"generatedAt":1737926800248,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"testPackages":{"@jest/globals":"29.7.0","@jest/types":"29.6.3","jest":"29.7.0","jest-environment-jsdom":"29.7.0"},"hasRouterPackage":false,"packageManager":{"type":"pnpm","version":"9.15.4"},"typescriptOptions":{"reactDocgen":"react-docgen"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/react","portableStoriesFileCount":2,"applicationFileCount":0,"storybookVersion":"8.5.1","storybookVersionSpecifier":"^8.5.1","language":"typescript","storybookPackages":{"@storybook/addon-docs":{"version":"8.5.1"},"@storybook/blocks":{"version":"8.5.1"},"@storybook/builder-vite":{"version":"8.5.1"},"@storybook/react":{"version":"8.5.1"},"@storybook/react-vite":{"version":"8.5.1"},"@storybook/theming":{"version":"8.5.1"},"storybook":{"version":"8.5.1"}},"addons":{"@storybook/addon-essentials":{"options":{"actions":false},"version":"8.5.1"},"@storybook/addon-links":{"version":"8.5.1"},"storybook-dark-mode":{"version":"4.0.2"}}}
{"generatedAt":1737926974838,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"testPackages":{"@jest/globals":"29.7.0","@jest/types":"29.6.3","jest":"29.7.0","jest-environment-jsdom":"29.7.0"},"hasRouterPackage":false,"packageManager":{"type":"pnpm","version":"9.15.4"},"typescriptOptions":{"reactDocgen":"react-docgen"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/react","portableStoriesFileCount":2,"applicationFileCount":0,"storybookVersion":"8.5.1","storybookVersionSpecifier":"^8.5.1","language":"typescript","storybookPackages":{"@storybook/addon-docs":{"version":"8.5.1"},"@storybook/blocks":{"version":"8.5.1"},"@storybook/builder-vite":{"version":"8.5.1"},"@storybook/react":{"version":"8.5.1"},"@storybook/react-vite":{"version":"8.5.1"},"@storybook/theming":{"version":"8.5.1"},"storybook":{"version":"8.5.1"}},"addons":{"@storybook/addon-essentials":{"options":{"actions":false},"version":"8.5.1"},"@storybook/addon-links":{"version":"8.5.1"},"storybook-dark-mode":{"version":"4.0.2"}}}
26 changes: 10 additions & 16 deletions src/component/ActivityCalendar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,8 @@ import {
} from 'react'
import { getYear, parseISO } from 'date-fns'
import { DEFAULT_LABELS, LABEL_MARGIN, NAMESPACE } from '../constants'
import { useAnimationStyles } from '../hooks/useAnimationStyles'
import { loadingAnimationName, useCalendarStyles } from '../hooks/useCalendarStyles'
import { useCalendarStyles } from '../hooks/useCalendarStyles'
import { useColorScheme } from '../hooks/useColorScheme'
import { usePrefersReducedMotion } from '../hooks/usePrefersReducedMotion'
import {
generateEmptyData,
getClassName,
Expand All @@ -27,7 +25,6 @@ import { createDefaultTheme, createTheme } from '../lib/theme'
import type {
Activity,
BlockElement,
Color,
DayIndex,
DayName,
EventHandlerMap,
Expand Down Expand Up @@ -214,9 +211,6 @@ export const ActivityCalendar = forwardRef<HTMLElement, Props>(

useCalendarStyles(colorScale, colorScheme)

const useAnimation = !usePrefersReducedMotion()
useAnimationStyles(colorScale[0] as Color, colorScheme, useAnimation)

if (loading) {
activities = generateEmptyData()
}
Expand Down Expand Up @@ -260,19 +254,19 @@ export const ActivityCalendar = forwardRef<HTMLElement, Props>(

function renderCalendar() {
return weeks
.map((week, weekIndex) =>
.map(week =>
week.map((activity, dayIndex) => {
if (!activity) {
return null
}

const loadingAnimation =
loading && useAnimation
? {
animation: `${loadingAnimationName} 1.75s ease-in-out infinite`,
animationDelay: `${weekIndex * 20 + dayIndex * 20}ms`,
}
: undefined
// const loadingAnimation =
// loading && useAnimation
// ? {
// animation: `${loadingAnimationName} 1.75s ease-in-out infinite`,
// animationDelay: `${weekIndex * 20 + dayIndex * 20}ms`,
// }
// : undefined

const block = (
<rect
Expand All @@ -285,7 +279,7 @@ export const ActivityCalendar = forwardRef<HTMLElement, Props>(
ry={blockRadius}
data-date={activity.date}
data-level={activity.level}
style={{ ...styles.block(colorScheme), ...loadingAnimation }}
style={{ ...styles.block(colorScheme) }}
/>
)

Expand Down
12 changes: 7 additions & 5 deletions src/hooks/useCalendarStyles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,13 @@ export function useCalendarStyles(colorScale: ColorScale, colorScheme: 'light' |
`,
)

style.innerHTML = `
@supports (fill: color-mix(in oklab, #000, #fff)) {
${rules.join('')}
}
`
// style.innerHTML = `
// @supports (fill: color-mix(in oklab, #000, #fff)) {
// ${rules.join('')}
// }
// `

style.innerHTML = rules.join('')
document.head.appendChild(style)

return () => {
Expand Down

0 comments on commit 1f48bfa

Please sign in to comment.