Improved loading handling

front/src/pages/AddPage.tsx

@@ -8,7 +8,7 @@ import { ClickHandler, LocationMarker, TrashboxMarkers } from '../components'
 import { useAddAnnouncement, useTrashboxes } from '../hooks/api'
 import { categories, categoryNames } from '../assets/category'
 import { stations, lines, lineNames } from '../assets/metro'
-import { fallbackError, gotError } from '../hooks/useFetch'
+import { fallbackError, gotError, gotResponse } from '../hooks/useFetch'
 import { useOsmAddresses } from '../hooks/api'
 import CardLayout from '../components/CardLayout'
 
@@ -89,17 +89,18 @@ function AddPage() {
                                 attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                                 url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
                             />
-                            <LocationMarker
+                            {gotResponse(address) && <LocationMarker
                                 address={fallbackError(address)}
                                 position={addressPosition}
                                 setPosition={setAddressPosition}
-                            />
+                            />}
+
                             <ClickHandler
                                 setPosition={setAddressPosition}
                             />
                         </MapContainer>
                     </div>
-                    <p>Адрес: {fallbackError(address)}</p>
+                    <p>Адрес: {gotResponse(address) ? fallbackError(address) : 'Загрузка...'}</p>
                 </Form.Group>
 
                 <Form.Group className='mb-3' controlId='description'>
@@ -138,12 +139,8 @@ function AddPage() {
                 <Form.Group className='mb-3' controlId='trashbox'>
                     <Form.Label>Пункт сбора мусора</Form.Label>
                     <div className='mb-3'>
-                        {trashboxes.loading
+                        {gotResponse(trashboxes)
                             ? (
-                                <div style={styles.map}>
-                                    <p>Загрузка...</p>
-                                </div>
-                            ) : (
                                 gotError(trashboxes) ? (
                                     <p
                                         style={styles.map}
@@ -167,10 +164,14 @@ function AddPage() {
                                         />
                                     </MapContainer>
                                 )
+                            ) : (
+                                <div style={styles.map}>
+                                    <p>Загрузка...</p>
+                                </div>
                             )
                         }
                     </div>
-                    {!gotError(trashboxes) && selectedTrashbox.index > -1 ? (
+                    {gotResponse(trashboxes) && !gotError(trashboxes) && selectedTrashbox.index > -1 ? (
                         <p>Выбран пункт сбора мусора на {
                             trashboxes.data[selectedTrashbox.index].Address
                         } с категорией {selectedTrashbox.category}</p>

front/src/pages/HomePage.tsx

@@ -26,16 +26,19 @@ function generateStories(announcements: Announcement[], refresh: () => void): St
 }
 
 function fallbackGenerateStories(announcements: UseFetchReturn<Announcement[]>) {
-    if (announcements.loading)
+    if (announcements.loading) {
         return fallbackStory()
+    }
 
-    if (gotError(announcements))
+    if (gotError(announcements)) {
         return fallbackStory(announcements.error, true)
+    }
 
     const stories = generateStories(announcements.data, announcements.refetch)
 
-    if (stories.length === 0)
+    if (stories.length === 0) {
         return fallbackStory('Здесь пока пусто')
+    }
 
     return stories
 }
@@ -43,7 +46,9 @@ function fallbackGenerateStories(announcements: UseFetchReturn<Announcement[]>)
 const fallbackStory = (text = '', isError = false): Story[] => [{
     content: ({ action }) => {
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        useEffect(() => { action('pause') }, [action])
+        useEffect(() => { 
+            action('pause') 
+        }, [action])
 
         return (
             <div style={styles.center} className={isError ? 'text-danger' : ''}>

front/src/pages/UserPage.tsx

@@ -3,7 +3,7 @@ import { Container } from 'react-bootstrap'
 import { useUser } from '../hooks/api'
 import { userCategories } from '../assets/userCategories'
 import { BackHeader, CategoryPreview, Points, SignOut } from '../components'
-import { gotError } from '../hooks/useFetch'
+import { gotError, gotResponse } from '../hooks/useFetch'
 
 function UserPage() {
     const user = useUser()
@@ -11,16 +11,26 @@ function UserPage() {
     return (
         <Container style={{ maxWidth: 'calc(100vh*9/16)' }}>
             <BackHeader text={
-                gotError(user) ? (
-                    user.error
+                gotResponse(user) ? (
+                    gotError(user) ? (
+                        user.error
+                    ) : (
+                        `${user.data.name}, с нами с ${new Date(user.data.regDate).toLocaleDateString('ru')}`
+                    )
                 ) : (
-                    `${user.data.name}, с нами с ${new Date(user.data.regDate).toLocaleDateString('ru')}`
+                    'Загрузка...'
                 )
             }>
                 <SignOut />
             </BackHeader>
 
-            <Points points={gotError(user) ? -1 : user.data?.points} />
+            <Points points={
+                gotResponse(user) ? (
+                    gotError(user) ? -1 : user.data?.points
+                ) : (
+                    'Загрузка...'
+                )
+            } />
             {userCategories.map(cat => (
                 <CategoryPreview key={cat} category={cat} />
             ))}