Refactor: Implement lazy loading for BreweryPost and BeerPost pages

This commit is contained in:
Aaron William Po
2023-05-20 20:56:29 -04:00
parent 56af72a471
commit 5005c1c1d4
2 changed files with 16 additions and 8 deletions

View File

@@ -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>;

View File

@@ -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>;