diff --git a/package.json b/package.json index d4dcf3f..8768945 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "react": "^16.10.2", "react-burger-menu": "^2.6.11", "react-dom": "^16.10.2", - "react-lazy-named": "^1.0.0", + "react-lazy-named": "^1.1.1", "react-lorem-ipsum": "^1.4.3", "react-scripts": "3.2.0" }, diff --git a/public/index.html b/public/index.html index bf1e57a..109f3b2 100644 --- a/public/index.html +++ b/public/index.html @@ -2,6 +2,7 @@ + diff --git a/src/components/Animated/index.js b/src/components/Animated/index.js new file mode 100644 index 0000000..ed4ecee --- /dev/null +++ b/src/components/Animated/index.js @@ -0,0 +1,49 @@ +import React, { Suspense } from 'react'; +import lazy from 'react-lazy-named'; + +// this is ugly +// const Div = lazy(() => +// import( +// 'framer-motion' /* webpackChunkName: "framer", webpackPreload: true */ +// ).then(mod => ({ +// default: mod.motion.div, +// })) +// ); + +const MotionDiv = lazy(() => import('framer-motion'), 'motion.div'); + +export const AnimatedDiv = props => ( + {props.children}}> + + +); + +const MotionA = lazy(() => import('framer-motion'), 'motion.a'); + +export const AnimatedA = props => ( + + {props.children} + + } + > + + +); + +const MotionLi = lazy(() => import('framer-motion'), 'motion.li'); + +export const AnimatedLi = props => ( + {props.children}}> + + +); + +const MotionUl = lazy(() => import('framer-motion'), 'motion.ul'); + +export const AnimatedUl = props => ( + {props.children}}> + + +); diff --git a/src/components/BoringContent/index.js b/src/components/BoringContent/index.js index e17fc76..76f9069 100644 --- a/src/components/BoringContent/index.js +++ b/src/components/BoringContent/index.js @@ -1,11 +1,21 @@ // @ts-nocheck -import React from 'react'; -import { LoremIpsum } from 'react-lorem-ipsum'; +import React, { Suspense } from 'react'; +import lazy from 'react-lazy-named'; + +const LoremIpsum = lazy( + () => + new Promise(resolve => + setTimeout(() => resolve(import('react-lorem-ipsum')), 5000) + ), + 'LoremIpsum' +); const BoringContent = () => (

Terms and Conditions

- + + +
); diff --git a/src/components/Hero/motorcycle-sm.jpg b/src/components/Hero/motorcycle-sm.jpg index e478b8f..01bd189 100644 Binary files a/src/components/Hero/motorcycle-sm.jpg and b/src/components/Hero/motorcycle-sm.jpg differ diff --git a/src/components/Products/index.js b/src/components/Products/index.js index 272a784..80dbb47 100644 --- a/src/components/Products/index.js +++ b/src/components/Products/index.js @@ -1,7 +1,7 @@ // @ts-nocheck import React, { useState, useEffect } from 'react'; -import { motion } from 'framer-motion'; import { shuffle } from 'lodash-es'; +import { AnimatedA, AnimatedDiv } from '../Animated'; import { delay, spring, @@ -33,22 +33,22 @@ function Products() {

Pick your next Hog ride

{colors.map(([background, fill], idx) => ( - - - + > + ))}
diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js index 7dadc58..6f01212 100644 --- a/src/components/Sidebar/index.js +++ b/src/components/Sidebar/index.js @@ -1,7 +1,7 @@ // @ts-nocheck import React, { useState } from 'react'; -import { motion } from 'framer-motion'; import { push as Menu } from 'react-burger-menu'; +import { AnimatedUl, AnimatedLi } from '../Animated'; import './styles.css'; @@ -33,28 +33,28 @@ const Hero = () => { onStateChange={({ isOpen }) => setTimeout(() => setOpen(isOpen), 50)} > {open ? ( - - + + Home - - + + My Hog - - + + Cart - - + + Contact - - + + ) : ( false )} diff --git a/yarn.lock b/yarn.lock index 473199d..e41c305 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6044,6 +6044,11 @@ lodash._reinterpolate@^3.0.0: resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d" integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0= +lodash.get@^4.4.2: + version "4.4.2" + resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99" + integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk= + lodash.memoize@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" @@ -8189,10 +8194,12 @@ react-is@^16.8.1, react-is@^16.8.4: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.2.tgz#984120fd4d16800e9a738208ab1fba422d23b5ab" integrity sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA== -react-lazy-named@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/react-lazy-named/-/react-lazy-named-1.0.0.tgz#18264c847e85cfd88d2d2f55862331c321897d3c" - integrity sha512-uQYGX8eDpoxmsIW5cm+yh2/6lP0MCmYyGiE8Ti0RU9NGyOl46pmixDVhQdJGUbpqMe1kqWGWbs0nog9U5ag9ng== +react-lazy-named@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/react-lazy-named/-/react-lazy-named-1.1.1.tgz#84d9813d7645754dbbdd7bff2e9dd2c6b7fc02d9" + integrity sha512-6qUKD8lmoH7gy5Ws0Cc9Jq6aE5SsZN+1npxo3jgmzJbK9Q64n5us7ZS9ZHrCBC6rnbrwae0FV1gnL+NlOTURkw== + dependencies: + lodash.get "^4.4.2" react-lorem-ipsum@^1.4.3: version "1.4.3"