bugfix: show placeholder ssr for lazy page

maapteh · Dec 12, 2019 · 5c6bfef · 5c6bfef
1 parent 3d412d0
commit 5c6bfef
Show file tree

Hide file tree

Showing 9 changed files with 4,191 additions and 1,957 deletions.
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -37,8 +37,8 @@
     "@apollo/react-hooks": "3.1.3",
     "@apollo/react-ssr": "3.1.3",
     "@apollo/react-testing": "3.1.3",
-    "@mpth/react-in-view": "0.0.3",
-    "@mpth/react-no-ssr": "0.0.7",
+    "@mpth/react-in-view": "1.0.1",
+    "@mpth/react-no-ssr": "1.0.0",
     "@types/react": "16.9.11",
     "@zeit/next-css": "1.0.1",
     "@zeit/next-sass": "1.0.1",

diff --git a/packages/app/src/elements/image/image.scss b/packages/app/src/elements/image/image.scss
@@ -1,14 +1,18 @@
-.root {
+.block {
     float: left;
     overflow: hidden;
     box-sizing: content-box;
     width: 168px;
     height: 209px;
     padding: 0 18px 14px 0;
     line-height: 0;
+}
+
+.hide {
     opacity:0;
     transition: opacity 200ms ease-in;
 }
+
 .img {
     width: 100%;
 }

diff --git a/packages/app/src/elements/image/image.tsx b/packages/app/src/elements/image/image.tsx
@@ -9,9 +9,15 @@ type Props = {
     url: string;
     title?: string;
     rootMargin?: string;
+    instantImage?: boolean;
 };
 
-export const Image = ({ url, title = '', rootMargin }: Props) => {
+export const Image = ({
+    url,
+    title = '',
+    rootMargin,
+    instantImage = false,
+}: Props) => {
     // This set of values serves to grow or shrink each side of the root element's bounding box before computing intersections
     const margin =
         rootMargin && /((((.\d*)?(px))){4})/.test(rootMargin)
@@ -23,15 +29,20 @@ export const Image = ({ url, title = '', rootMargin }: Props) => {
         rootMargin: margin,
     });
 
+    const css = classNames(style.block, style.hide, image && `${style.appear}`);
+    const imageComponent = <img src={url} alt={title} className={style.img} />;
+
+    if (instantImage) {
+        return <div className={style.block}>{imageComponent}</div>;
+    }
+
     if (inView && !image) {
         setImage(url);
     }
 
-    const css = classNames(style.root, image && `${style.appear}`);
-
     return (
         <div ref={ref} className={css}>
-            {image && <img src={url} alt={title} className={style.img} />}
+            {image && imageComponent}
         </div>
     );
 };
diff --git a/packages/app/src/modules/product/elements/product-details/product-details.tsx b/packages/app/src/modules/product/elements/product-details/product-details.tsx
@@ -10,9 +10,14 @@ import style from './product-details.scss';
 interface Props {
     data: GetProductQuery;
     short?: boolean;
+    instantImage?: boolean;
 }
 
-export const ProductDetails = ({ data, short = false }: Props) => {
+export const ProductDetails = ({
+    data,
+    short = false,
+    instantImage = false,
+}: Props) => {
     const product: ProductFragment = data && data.getProduct;
     const foundImage =
         product &&
@@ -28,7 +33,9 @@ export const ProductDetails = ({ data, short = false }: Props) => {
             lang="nl-NL"
             data-testid="product-details"
         >
-            {Boolean(image) && <Image url={image} />}
+            {Boolean(image) && (
+                <Image url={image} instantImage={instantImage} />
+            )}
             <h1>
                 {product.title} ({product.rating})
             </h1>

diff --git a/packages/app/src/modules/product/product-component.tsx b/packages/app/src/modules/product/product-component.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { ProductDetails } from './elements/product-details/product-details';
 import { useGetProductQuery } from '../../graphql/_generated-hooks';
+import { ProductPlaceholder } from './elements/product-details/product-placeholder';
 
 export interface ProductProps extends React.HTMLAttributes<HTMLElement> {
     id: string;
@@ -16,11 +17,18 @@ export const ProductComponent = ({
     context = {},
     short = false,
 }: ProductProps) => {
-    const { data } = useGetProductQuery({
+    const { data, loading } = useGetProductQuery({
         variables: { id },
         ssr,
         context,
     });
 
-    return <>{data ? <ProductDetails data={data} short={short} /> : null}</>;
+    return (
+        <>
+            {loading && <ProductPlaceholder />}
+            {data ? (
+                <ProductDetails data={data} short={short} instantImage={ssr} />
+            ) : null}
+        </>
+    );
 };
diff --git a/packages/app/src/modules/product/product.tsx b/packages/app/src/modules/product/product.tsx
@@ -5,16 +5,17 @@ import { ProductPlaceholder } from './elements/product-details/product-placehold
 
 type Props = {
     id: string;
+    instantImage?: boolean;
 };
 
-export const Product = ({ id }: Props) => {
+export const Product = ({ id, instantImage = false }: Props) => {
     const { data, loading } = useGetProductQuery({
         variables: { id },
     });
     return (
         <>
             {loading && <ProductPlaceholder />}
-            {data && <ProductDetails data={data} />}
+            {data && <ProductDetails data={data} instantImage={instantImage} />}
         </>
     );
 };
diff --git a/packages/app/src/pages/lazy.js b/packages/app/src/pages/lazy.js
@@ -28,21 +28,21 @@ const Lazy = () => (
         <ProductComponent id="9200000113944705" ssr short />
 
         {/* non ssr component, render only when in view */}
-        <InView fallback={ProductPlaceholder}>
+        <InView fallback={<ProductPlaceholder />}>
             <ProductComponent id="9200000113065845" ssr={false} short />
         </InView>
 
         <div className={style.root} />
 
         {/* non ssr component, render only when in view */}
-        <InView fallback={ProductPlaceholder}>
+        <InView fallback={<ProductPlaceholder />}>
             <ProductComponent id="9200000111963040" ssr={false} short />
         </InView>
 
         <div className={style.root} />
 
         {/* non ssr component, render only when in view */}
-        <InView fallback={ProductPlaceholder}>
+        <InView fallback={<ProductPlaceholder />}>
             <ProductComponent id="9200000103388809" ssr={false} short />
         </InView>
     </App>

diff --git a/packages/server/package.json b/packages/server/package.json
@@ -42,11 +42,11 @@
   "dependencies": {
     "@graphql-modules/core": "0.7.13",
     "@types/express": "4.17.2",
-    "@types/jest": "24.0.22",
-    "@types/node": "12.12.7",
-    "@types/node-fetch": "2.5.3",
-    "apollo-server": "2.9.7",
-    "apollo-server-express": "2.9.7",
+    "@types/jest": "24.0.23",
+    "@types/node": "12.12.17",
+    "@types/node-fetch": "2.5.4",
+    "apollo-server": "2.9.13",
+    "apollo-server-express": "2.9.13",
     "compression": "1.7.4",
     "core-js": "3.4.0",
     "dataloader": "1.4.0",
@@ -56,36 +56,36 @@
     "graphql-depth-limit": "1.1.0",
     "graphql-tag": "2.10.1",
     "graphql-tag-pluck": "0.8.7",
-    "graphql-toolkit": "0.6.8",
+    "graphql-toolkit": "0.7.4",
     "graphql-voyager": "1.0.0-rc.28",
     "node-fetch": "2.6.0",
     "reflect-metadata": "0.1.13",
-    "ts-node": "8.4.1",
+    "ts-node": "8.5.4",
     "ts-node-dev": "1.0.0-pre.44",
-    "typescript": "3.7.2"
+    "typescript": "3.7.3"
   },
   "resolutions": {
     "graphql-toolkit": "0.5.16",
     "graphql": "14.5.8"
   },
   "devDependencies": {
-    "@babel/core": "7.7.2",
-    "@graphql-codegen/add": "1.8.3",
-    "@graphql-codegen/cli": "1.8.3",
-    "@graphql-codegen/schema-ast": "1.8.3",
-    "@graphql-codegen/time": "1.8.3",
-    "@graphql-codegen/typescript-resolvers": "1.8.3",
+    "@babel/core": "7.7.5",
+    "@graphql-codegen/add": "1.9.1",
+    "@graphql-codegen/cli": "1.9.1",
+    "@graphql-codegen/schema-ast": "1.9.1",
+    "@graphql-codegen/time": "1.9.1",
+    "@graphql-codegen/typescript-resolvers": "1.9.1",
     "@graphql-inspector/cli": "1.26.0",
     "@types/graphql-depth-limit": "1.1.2",
-    "apollo-server-testing": "2.9.7",
+    "apollo-server-testing": "2.9.13",
     "babel-jest": "24.9.0",
     "clinic": "5.0.0",
     "jest": "24.9.0",
     "jest-cli": "24.9.0",
-    "lint-staged": "9.4.2",
-    "pm2": "4.1.2",
+    "lint-staged": "9.5.0",
+    "pm2": "4.2.1",
     "prettier": "1.19.1",
-    "ts-jest": "24.1.0",
+    "ts-jest": "24.2.0",
     "tslint": "5.20.1",
     "tslint-config-airbnb": "5.11.2",
     "tslint-config-prettier": "1.18.0"