feat: skeletons instead of loading display

Lockpickers-United · Apr 17, 2024 · 8204db5 · 8204db5
1 parent 8386720
commit 8204db5
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 39 deletions.
diff --git a/src/lockbazaar/EntriesLB.jsx b/src/lockbazaar/EntriesLB.jsx
@@ -3,20 +3,15 @@ import useWindowSize from '../util/useWindowSize.jsx'
 import DataContext from '../context/DataContext'
 import ListContext from '../context/ListContext'
 import {useTheme} from '@mui/material/styles'
-import FilterContext from '../context/FilterContext.jsx'
 import NoEntriesCardLB from './NoEntriesCardLB.jsx'
 import EntryLB from './EntryLB.jsx'
-import SortFilterBarLB from './SortFilterBarLB.jsx'
-import SellerProfileInline from './SellerProfileInline.jsx'
-import SearchBox from '../nav/SearchBox.jsx'
 
 function EntriesLB() {
 
     document.title = 'LPU Locks - Lock Bazaar Browser'
 
     const {visibleEntries = []} = useContext(DataContext)
     const {expanded, setExpanded} = useContext(ListContext)
-    const {filters} = useContext(FilterContext)
 
     const [updated, setUpdated] = useState(0)
 
@@ -52,39 +47,7 @@ function EntriesLB() {
             marginLeft: 'auto', marginRight: 'auto',
             fontSize: '1.5rem', lineHeight: 0.8
         }}>
-            {!Object.keys(filters).length &&
-                <React.Fragment>
-                    <div style={{
-                        fontSize: '1rem',
-                        lineHeight: '1.2rem',
-                        width: '100%',
-                        textAlign: 'left',
-                        marginTop: 10
-                    }}>
-                        These are user submitted lists of items for sale in
-                        the <a href={'https://discord.com/channels/140129091796992000/1109656237269860383'}
-                               target='_blank'
-                               rel='noopener noreferrer'>
-                        <nobr>#lock-bazaar</nobr>
-                    </a> channel on the Lockpickers United discord server.
-                        We are not vouching for the sellers, please take appropriate precautions as you would with any
-                        bazaar purchase.
-                        You&apos;ll find some handy tips for safe purchases
-                        in <a href={'https://discord.com/channels/140129091796992000/1111777295942828084'}
-                              target='_blank'
-                              rel='noopener noreferrer'>this post</a>.
-                        Sellers maintain &mdash; and are solely responsible for &mdash; all listings.
-                    </div>
-                </React.Fragment>
-            }
-
-            {filters.sellerName &&
-                <SellerProfileInline/>
-            }
-
-            <SortFilterBarLB/>
 
-            <SearchBox label='Listings'/>
 
             {entries.map((entry) =>
                 <EntryLB

diff --git a/src/lockbazaar/EntriesSkeletonLB.jsx b/src/lockbazaar/EntriesSkeletonLB.jsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import Accordion from '@mui/material/Accordion'
+import AccordionSummary from '@mui/material/AccordionSummary'
+import {Skeleton} from '@mui/material'
+
+function EntriesSkeleton() {
+
+    let skeletons = []
+    for (let i = 0; i < 25; i++) {
+        skeletons.push(i)
+    }
+
+    const style = {maxWidth: 700, marginLeft: 'auto', marginRight: 'auto', placeItems: 'center'}
+
+    return (
+        <div>
+            {skeletons.map((i) =>
+                <Accordion style={style} disableGutters key={i}>
+                    <AccordionSummary style={{fontSize: '1.1rem'}}>
+                        <Skeleton variant='rounded' animation='wave' height={30}
+                                  style={{margin: '10px 30px 10px 0px', width: '55%', opacity: 0.3}}/>
+                        <Skeleton variant='rounded' animation='wave' height={30}
+                                  style={{margin: '10px 40px 10px 0px', width: '25%', opacity: 0.4}}/>
+                        <Skeleton variant='rounded' animation='wave' height={30}
+                                  style={{margin: '10px 40px 10px 0px', width: '20%', opacity: 0.4}}/>
+                    </AccordionSummary>
+                </Accordion>
+            )}
+        </div>
+    )
+}
+
+export default EntriesSkeleton
diff --git a/src/lockbazaar/LockBazaarMain.jsx b/src/lockbazaar/LockBazaarMain.jsx
@@ -1,11 +1,15 @@
 import React, {useContext} from 'react'
 import useWindowSize from '../util/useWindowSize.jsx'
-import LoadingDisplay from '../util/LoadingDisplay.jsx'
 
 import EntriesLB from './EntriesLB.jsx'
+import EntriesSkeletonLB from './EntriesSkeletonLB.jsx'
+
 import LoadingContextLB from '../lockbazaarContext/LoadingContextLB.jsx'
 import FilterContext from '../context/FilterContext.jsx'
 import {useNavigate} from 'react-router-dom'
+import SellerProfileInline from './SellerProfileInline.jsx'
+import SortFilterBarLB from './SortFilterBarLB.jsx'
+import SearchBox from '../nav/SearchBox.jsx'
 
 function LockBazaarMain() {
     const {allDataLoaded, getSellerFromId} = useContext(LoadingContextLB)
@@ -36,7 +40,41 @@ function LockBazaarMain() {
             fontSize: '1.5rem', lineHeight: 0.8, textAlign: 'center'
         }}>
 
-            {!allDataLoaded && <LoadingDisplay/>}
+            {!Object.keys(filters).length &&
+                <React.Fragment>
+                    <div style={{
+                        fontSize: '1rem',
+                        lineHeight: '1.2rem',
+                        width: '100%',
+                        textAlign: 'left',
+                        marginTop: 10
+                    }}>
+                        These are user submitted lists of items for sale in
+                        the <a href={'https://discord.com/channels/140129091796992000/1109656237269860383'}
+                               target='_blank'
+                               rel='noopener noreferrer'>
+                        <nobr>#lock-bazaar</nobr>
+                    </a> channel on the Lockpickers United discord server.
+                        We are not vouching for the sellers, please take appropriate precautions as you would with any
+                        bazaar purchase.
+                        You&apos;ll find some handy tips for safe purchases
+                        in <a href={'https://discord.com/channels/140129091796992000/1111777295942828084'}
+                              target='_blank'
+                              rel='noopener noreferrer'>this post</a>.
+                        Sellers maintain &mdash; and are solely responsible for &mdash; all listings.
+                    </div>
+                </React.Fragment>
+            }
+
+            {filters.sellerName &&
+                <SellerProfileInline/>
+            }
+
+            <SortFilterBarLB/>
+
+            <SearchBox label='Listings'/>
+
+            {!allDataLoaded && <EntriesSkeletonLB/>}
             {allDataLoaded && <EntriesLB/>}
 
         </div>