Use libs discprov makeRequest when available (#44)

* Clean up dynamic image flashing * Use libs discprov makeRequest after eager selection * Fix simplebars
AudiusProject · Oct 14, 2020 · 8e32340 · 8e32340
1 parent 10a2011
commit 8e32340
Show file tree

Hide file tree

Showing 9 changed files with 146 additions and 102 deletions.
diff --git a/packages/web/src/components/artist/UserListModal.module.css b/packages/web/src/components/artist/UserListModal.module.css
@@ -13,6 +13,10 @@
   opacity: 0.5;
 }
 
+.scrollable :global(.simplebar-scrollbar:before) {
+  width: 6px;
+}
+
 .user {
   width: 292px;
   padding: 11px 0px;

diff --git a/packages/web/src/components/artist/mobile/UserListModal.module.css b/packages/web/src/components/artist/mobile/UserListModal.module.css
@@ -50,6 +50,10 @@
   opacity: 0.5;
 }
 
+.scrollable :global(.simplebar-scrollbar:before) {
+  width: 6px;
+}
+
 .user {
   padding: 14px 0px;
   display: flex;

diff --git a/packages/web/src/components/dynamic-image/DynamicImage.tsx b/packages/web/src/components/dynamic-image/DynamicImage.tsx
@@ -48,24 +48,28 @@ const fadeIn = (
 ) => {
   if (ref.current) {
     ref.current.style.zIndex = '2'
+
     if (image === placeholder) {
       ref.current.style.backgroundColor = 'unset'
       // Apply an empty url here so we can use the background image prop to set a gradient
       ref.current.style.backgroundImage = `${image}, url('')`
+      ref.current.style.transition = 'unset'
+      ref.current.style.opacity = '1'
+      return
+    }
+
+    // Set default background color for static images (transparent background defaults)
+    if (image.includes('/static')) {
+      ref.current.style.backgroundColor = 'var(--neutral-light-5)'
     } else {
-      // Set default background color for static images (transparent background defaults)
-      if (image.includes('/static')) {
-        ref.current.style.backgroundColor = 'var(--neutral-light-5)'
-      } else {
-        ref.current.style.backgroundColor = 'unset'
-      }
-      // Allow gradient values for 'image' in addition to URIs
-      ref.current.style.backgroundImage = image.includes('linear-gradient(')
-        ? `${image}, url('')`
-        : isUrl
-        ? `url(${image})`
-        : image
+      ref.current.style.backgroundColor = 'unset'
     }
+    // Allow gradient values for 'image' in addition to URIs
+    ref.current.style.backgroundImage = image.includes('linear-gradient(')
+      ? `${image}, url('')`
+      : isUrl
+      ? `url(${image})`
+      : image
     ref.current.style.transition = `opacity ${
       immediate ? '0.1s' : '0.5s'
     } ease-in-out`
@@ -79,12 +83,10 @@ const fadeIn = (
 const DynamicImage = ({
   image,
   isUrl,
-  initialOpacity,
   wrapperClassName,
   className,
   imageStyle,
   immediate,
-  immediatelyLeave,
   children,
   onClick,
   usePlaceholder = true

diff --git a/packages/web/src/components/track/desktop/ConnectedPlaylistTile.module.css b/packages/web/src/components/track/desktop/ConnectedPlaylistTile.module.css
@@ -13,6 +13,10 @@
   opacity: 0.5;
 }
 
+.tracksContainer :global(.simplebar-scrollbar:before) {
+  width: 6px;
+}
+
 .tracksContainer :global(.simplebar-offset) {
   right: 0px !important;
 }

diff --git a/packages/web/src/containers/discover-page/components/desktop/GenreSelectionModal.module.css b/packages/web/src/containers/discover-page/components/desktop/GenreSelectionModal.module.css
@@ -17,3 +17,7 @@
   border-radius: 4px;
   opacity: 0.5;
 }
+
+.simpleBar :global(.simplebar-scrollbar:before) {
+  width: 6px;
+}
diff --git a/packages/web/src/containers/service-selection/ServiceSelectionModal.module.css b/packages/web/src/containers/service-selection/ServiceSelectionModal.module.css
@@ -37,6 +37,7 @@
 }
 
 .scrollable :global(.simplebar-scrollbar:before) {
+  width: 6px;
   margin-bottom: 20px;
 }
 

diff --git a/packages/web/src/containers/upload-page/components/TracksPreview.module.css b/packages/web/src/containers/upload-page/components/TracksPreview.module.css
@@ -68,6 +68,10 @@
   opacity: 0.5;
 }
 
+.tracks :global(.simplebar-scrollbar:before) {
+  width: 6px;
+}
+
 .tracks :global(.simplebar-mask) {
   border-radius: 0 0 8px 8px;
 }

diff --git a/packages/web/src/containers/user-list-modal/components/UserListModal.module.css b/packages/web/src/containers/user-list-modal/components/UserListModal.module.css
@@ -19,3 +19,7 @@
   border-radius: 4px;
   opacity: 0.5;
 }
+
+.scrollable :global(.simplebar-scrollbar:before) {
+  width: 6px;
+}