From c6f30ec9a813d71aecdfefeaf53dc08eb73845d9 Mon Sep 17 00:00:00 2001 From: VividTruthKeeper Date: Tue, 19 Jul 2022 03:06:04 +0500 Subject: [PATCH] library implemented instead of custom skeleton --- package-lock.json | 15 +++ package.json | 1 + src/App.tsx | 1 + src/components/event_item/EventAside.tsx | 22 ++++- .../event_item/EventContentSkeleton.tsx | 24 ----- src/components/global/EventSkeleton.tsx | 15 --- src/components/global/VideoPlayer.tsx | 3 +- src/components/main/CalendarSection.tsx | 21 ++++- src/components/main/EventsSection.tsx | 20 +++- src/components/main/MainSlider.tsx | 34 ++++--- src/components/main/PartnersSection.tsx | 13 ++- src/helpers/otherVariables.ts | 1 + src/pages/EventItem.tsx | 35 ++++++- src/pages/Events.tsx | 93 +++++++++++++------ src/styles/_event-item.scss | 24 ----- src/styles/_event.scss | 10 -- src/styles/_main.scss | 12 --- src/styles/_variables.scss | 14 --- src/styles/_video-player.scss | 1 - src/types/playerType.ts | 1 - 20 files changed, 198 insertions(+), 162 deletions(-) delete mode 100644 src/components/event_item/EventContentSkeleton.tsx delete mode 100644 src/components/global/EventSkeleton.tsx create mode 100644 src/helpers/otherVariables.ts diff --git a/package-lock.json b/package-lock.json index 3617a14..3f9c1d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "node-sass": "^7.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-loading-skeleton": "^3.1.0", "react-player": "^2.10.1", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", @@ -14738,6 +14739,14 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-loading-skeleton": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.1.0.tgz", + "integrity": "sha512-j1U1CWWs68nBPOg7tkQqnlFcAMFF6oEK6MgqAo15f8A5p7mjH6xyKn2gHbkcimpwfO0VQXqxAswnSYVr8lWzjw==", + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/react-player": { "version": "2.10.1", "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.10.1.tgz", @@ -28541,6 +28550,12 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "react-loading-skeleton": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.1.0.tgz", + "integrity": "sha512-j1U1CWWs68nBPOg7tkQqnlFcAMFF6oEK6MgqAo15f8A5p7mjH6xyKn2gHbkcimpwfO0VQXqxAswnSYVr8lWzjw==", + "requires": {} + }, "react-player": { "version": "2.10.1", "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.10.1.tgz", diff --git a/package.json b/package.json index fb1434a..67e01eb 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "node-sass": "^7.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-loading-skeleton": "^3.1.0", "react-player": "^2.10.1", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", diff --git a/src/App.tsx b/src/App.tsx index 62bfcf0..fa27028 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,6 +5,7 @@ import { EventContext } from "./context/LoaderContext"; // Styles import "./styles/style.scss"; +import "react-loading-skeleton/dist/skeleton.css"; // Components import Nav from "./components/global/Nav"; diff --git a/src/components/event_item/EventAside.tsx b/src/components/event_item/EventAside.tsx index 7783204..6f68faa 100644 --- a/src/components/event_item/EventAside.tsx +++ b/src/components/event_item/EventAside.tsx @@ -1,13 +1,14 @@ // Modules import { useState, useEffect } from "react"; import { v4 as uuidv4 } from "uuid"; +import Skeleton from "react-loading-skeleton"; // Components import Event from "../global/Event"; -import EventSkeleton from "../global/EventSkeleton"; // Helpers import { getAsidePosts } from "../../helpers/apiRequests"; +import { highlightColor } from "../../helpers/otherVariables"; // Types import { eventType } from "../../types/eventProps"; @@ -60,7 +61,24 @@ const EventAside = () => { /> ); }) - : ["", "", "", ""].map(() => )} + : ["", "", "", ""].map(() => ( +
+ + + +
+ ))} ); diff --git a/src/components/event_item/EventContentSkeleton.tsx b/src/components/event_item/EventContentSkeleton.tsx deleted file mode 100644 index b9efe90..0000000 --- a/src/components/event_item/EventContentSkeleton.tsx +++ /dev/null @@ -1,24 +0,0 @@ -const EventContentSkeleton = () => { - return ( -
-
-

-

-
-
-
-
-

-

-

-

-

-

-

-
-
-
- ); -}; - -export default EventContentSkeleton; diff --git a/src/components/global/EventSkeleton.tsx b/src/components/global/EventSkeleton.tsx deleted file mode 100644 index 0d0a286..0000000 --- a/src/components/global/EventSkeleton.tsx +++ /dev/null @@ -1,15 +0,0 @@ -const EventSkeleton = () => { - return ( -
-
-
-

-
-
-

-
-
- ); -}; - -export default EventSkeleton; diff --git a/src/components/global/VideoPlayer.tsx b/src/components/global/VideoPlayer.tsx index 66bde25..e20b7ef 100644 --- a/src/components/global/VideoPlayer.tsx +++ b/src/components/global/VideoPlayer.tsx @@ -8,10 +8,9 @@ import PlayIcon from "./PlayIcon"; // Types import { playerInterface } from "../../types/playerType"; -const VideoPlayer = ({ videoUrl, placeholder }: playerInterface) => { +const VideoPlayer = ({ videoUrl }: playerInterface) => { return (
- {placeholder ? : ""} { const [video, setVideo]: playerType = useState(""); const [videoData, setVideoData]: any = useState(); - const [placeholder, setPlaceholder]: any = useState(); useEffect(() => { getVideos((res: any) => { setVideoData(res); - setPlaceholder(res[0].poster); setVideo(res[0].video); }); }, []); @@ -31,7 +31,15 @@ const CalendarSection = () => {
- + {video.length > 1 ? ( + + ) : ( + + )}
{ className="video-slide" onClick={() => { setVideo(vid.video); - setPlaceholder(vid.poster); }} > @@ -58,7 +65,11 @@ const CalendarSection = () => { : ["", "", ""].map(() => { return ( -
+ ); })} diff --git a/src/components/main/EventsSection.tsx b/src/components/main/EventsSection.tsx index c2fee7a..5cb2e29 100644 --- a/src/components/main/EventsSection.tsx +++ b/src/components/main/EventsSection.tsx @@ -1,14 +1,15 @@ // Modules import { useState, useEffect } from "react"; import { v4 as uuidv4 } from "uuid"; +import Skeleton from "react-loading-skeleton"; // Components import SectionTitle from "../global/SectionTitle"; import Event from "../global/Event"; -import EventSkeleton from "../global/EventSkeleton"; // Helpers import { getMainPosts } from "../../helpers/apiRequests"; +import { highlightColor } from "../../helpers/otherVariables"; // Types import { eventType } from "../../types/eventProps"; @@ -65,7 +66,22 @@ const EventsSection = () => { ); }) : ["", "", "", "", "", ""].map(() => ( - +
+ + + +
))}
diff --git a/src/components/main/MainSlider.tsx b/src/components/main/MainSlider.tsx index 532a58a..9b98663 100644 --- a/src/components/main/MainSlider.tsx +++ b/src/components/main/MainSlider.tsx @@ -4,6 +4,7 @@ import { Navigation, Autoplay } from "swiper"; import "swiper/css"; import { useState, useEffect } from "react"; import { v4 as uuidv4 } from "uuid"; +import Skeleton from "react-loading-skeleton"; // Icons import arrowPrev from "../../icons/arrow-left-white.svg"; @@ -17,13 +18,14 @@ import { SlideProps } from "../../types/mainSliderSlide"; // Helpers import { getMainSliderData } from "../../helpers/apiRequests"; +import { highlightColor } from "../../helpers/otherVariables"; const MainSlider = () => { // State const [slideData, setSlideData]: [ SlideProps[], React.Dispatch> - ] = useState([{ id: 0, header: "", txt: "", img: "" }]); + ] = useState([{ id: -1, header: "", txt: "", img: "" }]); // Effect useEffect(() => { @@ -43,20 +45,22 @@ const MainSlider = () => { prevEl: ".slider-prev", }} > - {slideData - ? slideData.map((slide: SlideProps) => { - return ( - - - - ); - }) - : ""} + {slideData[0].id > -1 ? ( + slideData.map((slide: SlideProps) => { + return ( + + + + ); + }) + ) : ( + + )}
diff --git a/src/components/main/PartnersSection.tsx b/src/components/main/PartnersSection.tsx index 0b0fcc2..aeccbf7 100644 --- a/src/components/main/PartnersSection.tsx +++ b/src/components/main/PartnersSection.tsx @@ -3,6 +3,7 @@ import { Swiper, SwiperSlide } from "swiper/react"; import { Navigation, Autoplay } from "swiper"; import { v4 as uuidv4 } from "uuid"; import { useState, useEffect } from "react"; +import Skeleton from "react-loading-skeleton"; // Components import SectionTitle from "../global/SectionTitle"; @@ -19,8 +20,7 @@ import { partnersType } from "../../types/partnersType"; // Helpers import { getPartnerSliderData } from "../../helpers/apiRequests"; - -// const partnersData: string[] = [tps, samsung, mi, dragon]; +import { highlightColor } from "../../helpers/otherVariables"; const Partners = () => { // State @@ -64,7 +64,14 @@ const Partners = () => { : ["", "", "", "", "", ""].map(() => { return ( -
+ ); })} diff --git a/src/helpers/otherVariables.ts b/src/helpers/otherVariables.ts new file mode 100644 index 0000000..078b89a --- /dev/null +++ b/src/helpers/otherVariables.ts @@ -0,0 +1 @@ +export const highlightColor: string = "rgba(255, 255, 255, 0.8)"; diff --git a/src/pages/EventItem.tsx b/src/pages/EventItem.tsx index e41c39e..df11ba9 100644 --- a/src/pages/EventItem.tsx +++ b/src/pages/EventItem.tsx @@ -1,16 +1,15 @@ // Modules import { useEffect, useState } from "react"; import { useParams } from "react-router-dom"; +import Skeleton from "react-loading-skeleton"; // Components import EventAside from "../components/event_item/EventAside"; import EventDate from "../components/global/EventDate"; -import EventContentSkeleton from "../components/event_item/EventContentSkeleton"; // Helpers import { getEvent } from "../helpers/apiRequests"; - -// Link +import { highlightColor } from "../helpers/otherVariables"; const EventItem = () => { useEffect(() => { @@ -35,7 +34,35 @@ const EventItem = () => {

{eventData.title}

) : ( - +
+ + + + +
)} {eventData && !loader ? (
diff --git a/src/pages/Events.tsx b/src/pages/Events.tsx index d5812d9..1a1d827 100644 --- a/src/pages/Events.tsx +++ b/src/pages/Events.tsx @@ -1,6 +1,7 @@ // Modules import { useState, useEffect } from "react"; import { v4 as uuidv4 } from "uuid"; +import Skeleton from "react-loading-skeleton"; // Icons import left from "../icons/arrow-left-white.svg"; @@ -9,13 +10,13 @@ import right from "../icons/arrow-right-white.svg"; // Components import Event from "../components/global/Event"; import SectionTitle from "../components/global/SectionTitle"; -import EventSkeleton from "../components/global/EventSkeleton"; // Types import { eventType } from "../types/eventProps"; // Helpers import { getAllPosts } from "../helpers/apiRequests"; +import { highlightColor } from "../helpers/otherVariables"; const Events = () => { // State @@ -87,41 +88,77 @@ const Events = () => { "", "", "", - ].map(() => )} + ].map(() => ( +
+ + + +
+ ))}
- + {events.data[0].id !== -1 ? ( + + ) : ( + + )} + - {events.meta.current_page} + {events.meta.current_page > -1 ? ( + events.meta.current_page + ) : ( + + )} - + {events.data[0].id !== -1 ? ( + + ) : ( + + )}
- {`Всего ${events.meta.total - 1} ${ - events.meta.total - 1 === 1 - ? "страница" - : events.meta.total - 1 < 5 - ? "страницы" - : "страниц" - }`} + + {events.meta.total > -1 ? ( + `Всего ${events.meta.total - 1} ${ + events.meta.total - 1 === 1 + ? "страница" + : events.meta.total - 1 < 5 + ? "страницы" + : "страниц" + }` + ) : ( + + )} +
diff --git a/src/styles/_event-item.scss b/src/styles/_event-item.scss index 1c52a72..4db42ce 100644 --- a/src/styles/_event-item.scss +++ b/src/styles/_event-item.scss @@ -64,28 +64,4 @@ display: flex; flex-direction: column; gap: 4rem; - - &.skeleton { - span, - h2, - p { - height: 2.2rem; - width: 100%; - padding: 1rem 0; - @include shineLoad; - } - - p.big { - height: 4rem; - } - - .eventitem-content { - gap: 2rem; - } - - .eventitem-img { - height: 50rem; - @include shineLoad; - } - } } diff --git a/src/styles/_event.scss b/src/styles/_event.scss index d31da22..c999695 100644 --- a/src/styles/_event.scss +++ b/src/styles/_event.scss @@ -6,14 +6,6 @@ border-bottom: 0.1rem solid $base-green; max-width: 42rem; overflow: hidden; - - &.skeleton { - border-bottom: none; - p { - height: 2rem; - @include shineLoad; - } - } } .event-img { @@ -22,8 +14,6 @@ width: 100%; height: 100%; overflow: hidden; - - @include shineLoad; img { width: 100%; height: 100%; diff --git a/src/styles/_main.scss b/src/styles/_main.scss index 7d2c47b..f6e47e6 100644 --- a/src/styles/_main.scss +++ b/src/styles/_main.scss @@ -141,12 +141,6 @@ width: 100%; background: #fff; border: 0.1rem solid #00000020; - - &.skeleton { - @include shineLoad; - height: 18rem; - width: 100%; - } } .rating-inner { @@ -159,7 +153,6 @@ .swiper-bg { min-height: 140rem; width: 100%; - @include shineLoad; } .calendars { @@ -189,11 +182,6 @@ height: 100%; object-fit: cover; } - - &.skeleton { - @include shineLoad; - height: 16rem; - } } .calendars-right { diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index d57ac08..1f7e96c 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -69,17 +69,3 @@ $hover-green: #0e654e; background: #7d7d7d !important; } } - -@mixin shineLoad { - backdrop-filter: blur(0.3rem); - background: #eee; - background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%); - border-radius: 5px; - background-size: 200% 100%; - animation: 1.5s animateBg linear infinite; - @keyframes animateBg { - to { - background-position-x: -200%; - } - } -} diff --git a/src/styles/_video-player.scss b/src/styles/_video-player.scss index 3d0bb69..a0a24e1 100644 --- a/src/styles/_video-player.scss +++ b/src/styles/_video-player.scss @@ -1,7 +1,6 @@ .player { width: 100%; min-height: 51.2rem; - @include shineLoad; img { pointer-events: none; diff --git a/src/types/playerType.ts b/src/types/playerType.ts index c76de08..01a30e5 100644 --- a/src/types/playerType.ts +++ b/src/types/playerType.ts @@ -1,5 +1,4 @@ export type playerType = [string, React.Dispatch]; export interface playerInterface { videoUrl: string; - placeholder: any; }