update

src/pages/header/logo.js

@@ -1,5 +1,5 @@
 import {Link} from "react-router-dom";
-import logo from "../../logo.svg";
+import logo from "../../logo.png";
 
 export const Logo = () =>
     <Link to='/'><img src={logo} className="App-logo" alt="logo" /></Link>

src/pages/my-tracks/my-tracks.js

@@ -4,6 +4,7 @@ import {CPlaylistDropZone} from "../tools";
 import {SortableContainer, SortableElement} from 'react-sortable-hoc';
 import {arrayMoveImmutable} from 'array-move';
 import {useState,useEffect} from "react";
+import {CPreloaded} from "../preloader";
 
 const SortableItem = SortableElement(CTrack);
 
@@ -18,7 +19,9 @@ const SortableList = SortableContainer(MyTracks)
 export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
     <>
         <CPlaylistDropZone >
+            <CPreloaded promiseName='playlistById'>
             <CSortableComponent />
+            </CPreloaded>
      </CPlaylistDropZone >
     </>
 

src/pages/my-tracks/no-playlist-mytracks.js

@@ -6,6 +6,7 @@ import {connect} from "react-redux";
 import {useEffect, useState} from "react";
 import {arrayMoveImmutable} from "array-move";
 import {SortableContainer, SortableElement} from "react-sortable-hoc";
+import {CPreloaded} from "../preloader";
 
 
 
@@ -24,7 +25,9 @@ export const NoPlaylistMytracks = () =>
     <div>
     <h1>Моя музыка</h1>
         <CTrackDropZone>
+            <CPreloaded promiseName='findMyTracks1'>
             <CSortableComponent />
+            </CPreloaded>
         </CTrackDropZone>
     </div>
 

src/pages/preloader/preloader.js

@@ -1,5 +1,5 @@
-import logo from "../../logo.svg";
-import preloader from './preloader.css'
+import logo from "../../logo.png";
+import './preloader.css'
 import {connect} from "react-redux";
 
 
@@ -13,7 +13,7 @@ export const Preloader = () =>
 const RejectAlert = ({error}) =>
     <div>
         <h2>{error}</h2>
-        <img src={logo}/>
+        <img src={logo} alt='logo'/>
     </div>
 
 export const Preloaded = ({promiseName, promiseState, children}) =>

src/pages/user-tracks/allTracks.js

@@ -1,13 +1,16 @@
-import {actionTracksFind,backURL} from "../../actions";
+import {actionTracksFind} from "../../actions";
 import {connect} from "react-redux";
 import {store} from "../../reducers";
 import {CTrack} from "../track";
+import {CPreloaded} from "../preloader";
 
 
 const AllTracks = ({tracks}={}) =>
     <div>
         <h2>Все композиции</h2>
+        <CPreloaded promiseName='findAllTracks1'>
         {(tracks || []).map(track => <CTrack track={track}/>)}
+        </CPreloaded>
     </div>
 
 

src/pages/user-tracks/allUsers.js

@@ -3,115 +3,6 @@ import {Link} from "react-router-dom";
 import {actionUserFind} from "../../actions";
 import {store} from "../../reducers";
 
-const defaultPlaylists = [
-    {
-        "_id": "5fe25a677aa9837fd3e741d9",
-        "owner": {
-            "login": "123"
-        },
-        "tracks": null
-    },
-    {
-        "_id": "5ff7fddee926687ee86b0b17",
-        "owner": {
-            "login": "uu"
-        },
-        "tracks": [
-            {
-                "url": "track/061766012c089e677a18bd7d7fcc132a",
-                "originalFileName": "01 - Bored.mp3"
-            },
-            {
-                "url": "track/5fe385a7af766b71f1bcaefe723dfb77",
-                "originalFileName": "03 - One Weak.mp3"
-            }
-        ]
-    },
-
-
-    {
-        "_id": "5ff7ff36e926687ee86b0b1d",
-        "owner": {
-            "login": "uu"
-        },
-        "tracks": [
-            {
-                "url": "track/1717d07cd1a5876b51c8e3d00c1fa123",
-                "originalFileName": "02 - Minus Blindfold.mp3"
-            },
-            {
-                "url": "track/011dc1fafb88494e2b2fcdd5408c9fc8",
-                "originalFileName": "09 - Engine No.9.mp3"
-            },
-            {
-                "url": "track/f926ed49d35036d952fb34426dbc7d0e",
-                "originalFileName": "10 - Fireal.mp3"
-            }
-        ]
-    },
-
-
-
-    {
-        "_id": "5fe0f8097aa9837fd3e74192",
-        "owner": {
-            "login": "Windforce"
-        },
-        "tracks": [
-            {
-                "url": "track/a37387adcf96795d5a49d4d7e09c0472",
-                "originalFileName": "01-Cluster One.mp3"
-            },
-            {
-                "url": "track/3164a657cf44dd734344ed3ebcde625f",
-                "originalFileName": "Роман, заставь его надеть пиджак!.mp3"
-            },
-            {
-                "url": "track/4685efea193d2d48d5ac56fc2ab767d8",
-                "originalFileName": "07-Take It Back.mp3"
-            },
-            {
-                "url": "track/59e061cc86750556dfae0f83708da571",
-                "originalFileName": "10-Lost For Words.mp3"
-            }
-        ]
-    },
-    {
-        "_id": "5fe35ffbe926687ee86b0a5c",
-        "owner": {
-            "login": "newUser"
-        },
-        "tracks": [
-            {
-                "url": "track/9251ba5dd154807fb10fe0d9dfe4c804",
-                "originalFileName": "01 - God Loves Only You.mp3"
-            },
-            {
-                "url": "track/a9c945eebf4cd5e829c470f8f0672ddf",
-                "originalFileName": "03 - Over The Love.mp3"
-            },
-            {
-                "url": "track/57cd3b9b7cb7d6f216c07fb46374fce5",
-                "originalFileName": "04 - Talk Too Much.mp3"
-            },
-            {
-                "url": "track/b1b2c99969d210f3d70f5f1fad651732",
-                "originalFileName": "07 - You'Re Too Expensive.mp3"
-            },
-            {
-                "url": "track/a8d8330e2c4ddfa00db8f285d6f7ec0b",
-                "originalFileName": "08 - My Love Will Fall.mp3"
-            },
-            {
-                "url": "track/9a6f3d3c2039a5f3e15a367f5f2a3675",
-                "originalFileName": "10 - Feeling The Itch.mp3"
-            },
-            {
-                "url": "track/2fc841aff4003b3dd4d0c814f1f9651d",
-                "originalFileName": "11 - You Can't Always Do What You Like.mp3"
-            }
-        ]
-    },]
 
 
 
@@ -119,13 +10,13 @@ const User = ({playlist:{_id, login}={}}) =>
 <li><Link to={`/user/${_id}`}>{login}</Link></li>
 
 
-const AllUsers = ({playlists=defaultPlaylists}) =>{
+const AllUsers = ({playlists={}}) =>{
 
         return (
             <div>
                 <h3>Плейлисты ползователей</h3>
             <ul className='Users'>
-                    {playlists.map(playlist =>  <User playlist={playlist}/> )}
+                    {playlists.map(playlist =>  <User key={Math.random()} playlist={playlist}/> )}
             </ul>
             </div>
         )

src/pages/user-tracks/userTracks.js

@@ -4,11 +4,14 @@
 
 import {connect} from "react-redux";
 import {CTrack} from "../track";
+import {CPreloaded} from "../preloader";
 
 
 const Tracks = ({tracks}={}) =>
     <div>
+        <CPreloaded promiseName='trackFindByOwner1'>
         {(tracks || []).map(track => <CTrack track={track}/>)}
+        </CPreloaded>
     </div>
 
 const CTracks = connect(state => ({tracks: state.promise.trackFindByOwner1?.payload || []}))(Tracks)
@@ -16,7 +19,6 @@ const CTracks = connect(state => ({tracks: state.promise.trackFindByOwner1?.payl
 
 export const UserTracks = ({match:{params:{_id}}}) =>
     <>
-        <h1>{_id}</h1>
         <CTracks />
     </>