From 5005c1c1d4575973d45d2a9af957a656a88bd777 Mon Sep 17 00:00:00 2001
From: Aaron William Po <apo2@uwo.ca>
Date: Sat, 20 May 2023 20:56:29 -0400
Subject: [PATCH] Refactor: Implement lazy loading for BreweryPost and BeerPost
 pages

---
 src/pages/beers/[id]/index.tsx     | 11 +++++++----
 src/pages/breweries/[id]/index.tsx | 13 +++++++++----
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/pages/beers/[id]/index.tsx b/src/pages/beers/[id]/index.tsx
index facda0c..4138520 100644
--- a/src/pages/beers/[id]/index.tsx
+++ b/src/pages/beers/[id]/index.tsx
@@ -2,10 +2,6 @@ import { NextPage, GetServerSideProps } from 'next';
 import Head from 'next/head';
 import Image from 'next/image';
 
-import BeerInfoHeader from '@/components/BeerById/BeerInfoHeader';
-import BeerPostCommentsSection from '@/components/BeerById/BeerPostCommentsSection';
-import BeerRecommendations from '@/components/BeerById/BeerRecommendations';
-
 import getBeerPostById from '@/services/BeerPost/getBeerPostById';
 
 import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
@@ -16,6 +12,13 @@ import 'react-responsive-carousel/lib/styles/carousel.min.css';
 import { Carousel } from 'react-responsive-carousel';
 import useMediaQuery from '@/hooks/utilities/useMediaQuery';
 import { Tab } from '@headlessui/react';
+import dynamic from 'next/dynamic';
+
+const [BeerInfoHeader, BeerPostCommentsSection, BeerRecommendations] = [
+  dynamic(() => import('@/components/BeerById/BeerInfoHeader')),
+  dynamic(() => import('@/components/BeerById/BeerPostCommentsSection')),
+  dynamic(() => import('@/components/BeerById/BeerRecommendations')),
+];
 
 interface BeerPageProps {
   beerPost: z.infer<typeof beerPostQueryResult>;
diff --git a/src/pages/breweries/[id]/index.tsx b/src/pages/breweries/[id]/index.tsx
index 291c612..30b8c2e 100644
--- a/src/pages/breweries/[id]/index.tsx
+++ b/src/pages/breweries/[id]/index.tsx
@@ -9,10 +9,15 @@ import 'react-responsive-carousel/lib/styles/carousel.min.css'; // requires a lo
 import { Carousel } from 'react-responsive-carousel';
 import useMediaQuery from '@/hooks/utilities/useMediaQuery';
 import { Tab } from '@headlessui/react';
-import BreweryInfoHeader from '@/components/BreweryById/BreweryInfoHeader';
-import BreweryPostMap from '@/components/BreweryById/BreweryPostMap';
-import BreweryBeersSection from '@/components/BreweryById/BreweryBeerSection';
-import BreweryCommentsSection from '@/components/BreweryById/BreweryCommentsSection';
+
+import dynamic from 'next/dynamic';
+
+const [BreweryInfoHeader, BreweryBeersSection, BreweryCommentsSection, BreweryPostMap] = [
+  dynamic(() => import('@/components/BreweryById/BreweryInfoHeader')),
+  dynamic(() => import('@/components/BreweryById/BreweryBeerSection')),
+  dynamic(() => import('@/components/BreweryById/BreweryCommentsSection')),
+  dynamic(() => import('@/components/BreweryById/BreweryPostMap')),
+];
 
 interface BreweryPageProps {
   breweryPost: z.infer<typeof BreweryPostQueryResult>;