Skip to content

Commit

Permalink
perf: load game filters only when requested by user
Browse files Browse the repository at this point in the history
  • Loading branch information
jy95 committed Dec 2, 2024
1 parent 1ffb13b commit b6ad414
Showing 1 changed file with 37 additions and 15 deletions.
52 changes: 37 additions & 15 deletions src/app/[locale]/games/_client/GamesFilters.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,46 @@
import { lazy, Suspense } from "react";

// MUI
import Grid from '@mui/material/Grid2';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import CircularProgress from '@mui/material/CircularProgress';
import SearchIcon from '@mui/icons-material/Search';

// Custom
import GenresSelect from "@/components/GamesView/GenresSelect";
import PlatformSelect from "@/components/GamesView/PlatformSelect";
import TitleFilter from "@/components/GamesView/TitleFilter";
const GenresSelect = lazy(() => import("@/components/GamesView/GenresSelect"));
const PlatformSelect = lazy(() => import("@/components/GamesView/PlatformSelect"));
const TitleFilter = lazy(() => import("@/components/GamesView/TitleFilter"));

export default function GamesFilters() {

return (
<Grid container spacing={1}>
<Grid size={{ xs: 12, md: 5 }}>
<TitleFilter />
</Grid>
<Grid size={{ xs: 12, md: 3 }}>
<PlatformSelect />
</Grid>
<Grid size={{ xs: 12, md: 4 }}>
<GenresSelect />
</Grid>
</Grid>
)
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1-header"
>
<SearchIcon aria-label="Options"/>
{"Options"}
</AccordionSummary>
<AccordionDetails>
<Suspense fallback={<CircularProgress />}>
<Grid container spacing={1}>
<Grid size={{ xs: 12, md: 5 }}>
<TitleFilter />
</Grid>
<Grid size={{ xs: 12, md: 3 }}>
<PlatformSelect />
</Grid>
<Grid size={{ xs: 12, md: 4 }}>
<GenresSelect />
</Grid>
</Grid>
</Suspense>
</AccordionDetails>
</Accordion>
);
}

0 comments on commit b6ad414

Please sign in to comment.