Create AsyncWrapper and reuse it

src/components-connected/top-albums.tsx

@@ -1,5 +1,4 @@
 import {
-  Alert,
   Avatar,
   Box,
   ListItem,
@@ -10,36 +9,18 @@ import {
   Typography
 } from '@mui/material'
 import truncate from 'lodash/truncate'
-import { Suspense } from 'react'
 
-import ErrorBoundary from 'src/components/error-boundary'
 import Tooltip from 'src/components/tooltip'
 import { useMinBreakpoint } from 'src/helpers/rwd-helpers'
 import { useSearchState } from 'src/hooks/use-search-state'
 import { useTopAlbums } from 'src/hooks/use-top-albums'
 
 import AlbumRatings from './album-ratings'
 
-export default function TopAlbums() {
-  return (
-    <ErrorBoundary
-      fallback={
-        <Alert severity="error">
-          Something went wrong with top albums service :(
-        </Alert>
-      }
-    >
-      <Suspense fallback={<TopAlbumsSkeleton />}>
-        <TopAlbumsContent />
-      </Suspense>
-    </ErrorBoundary>
-  )
-}
-
-function TopAlbumsContent() {
+export function TopAlbums() {
   // TODO I did not have time to make it perfectly responsive, so I hide some elements
   const isBiggerThanSmDevice = useMinBreakpoint('sm')
-  const { data: albums = [] } = useTopAlbums()
+  const { data: albums } = useTopAlbums()
   const [search] = useSearchState()
 
   const filteredAlbums = search
@@ -107,7 +88,7 @@ function TopAlbumsContent() {
   )
 }
 
-function TopAlbumsSkeleton() {
+export function TopAlbumsSkeleton() {
   // TODO I did not have time to make it perfectly responsive, so I hide some elements
   const isBiggerThanSmDevice = useMinBreakpoint('sm')
   const items = new Array(10).fill(null).map((_, index) => index)

src/components/async-wrapper.tsx

@@ -0,0 +1,21 @@
+import { ReactNode, Suspense } from 'react'
+
+import ErrorBoundary from 'src/components/error-boundary'
+
+type AsyncWrapperProps = {
+  loading: ReactNode
+  error: ReactNode
+  children: ReactNode
+}
+
+export default function AsyncWrapper({
+  error,
+  loading,
+  children
+}: AsyncWrapperProps) {
+  return (
+    <ErrorBoundary fallback={error}>
+      <Suspense fallback={loading}>{children}</Suspense>
+    </ErrorBoundary>
+  )
+}

src/pages/home-page.tsx

@@ -1,8 +1,12 @@
-import { Container, Divider, Typography } from '@mui/material'
+import { Alert, Container, Divider, Typography } from '@mui/material'
 import styled from 'styled-components'
 
 import AlbumsSearchField from 'src/components-connected/albums-search-field'
-import TopAlbums from 'src/components-connected/top-albums'
+import {
+  TopAlbums,
+  TopAlbumsSkeleton
+} from 'src/components-connected/top-albums'
+import AsyncWrapper from 'src/components/async-wrapper'
 
 export default function HomePage() {
   return (
@@ -18,7 +22,16 @@ export default function HomePage() {
       <Divider sx={{ my: 3 }} />
 
       <AlbumsBox>
-        <TopAlbums />
+        <AsyncWrapper
+          loading={<TopAlbumsSkeleton />}
+          error={
+            <Alert severity="error">
+              Something went wrong with top albums service :(
+            </Alert>
+          }
+        >
+          <TopAlbums />
+        </AsyncWrapper>
       </AlbumsBox>
     </ContainerStyled>
   )