feat: marketplace improvements, remove Unsplash text, add Weather skeleton, replace Twitter with X, minor fixes etc

Co-authored-by: Alex Sparkes <alexsparkes@gmail.com>
Co-authored-by: Isaac <contact@eartharoid.me>

src/features/weather/Weather.jsx

@@ -3,6 +3,8 @@ import { PureComponent } from 'react';
 
 import WeatherIcon from './components/WeatherIcon';
 import Expanded from './components/Expanded';
+import WeatherSkeleton from './components/WeatherSkeleton';
+
 
 import EventBus from 'utils/eventbus';
 
@@ -42,12 +44,13 @@ class WeatherWidget extends PureComponent {
   }
 
   render() {
-    if (this.state.done === false) {
-      return <div className="weather"></div>;
-    }
 
     const weatherType = localStorage.getItem('weatherType') || 1;
 
+    if (this.state.done === false) {
+      return <WeatherSkeleton weatherType={weatherType} />;
+    }
+
     if (!this.state.weather) {
       return (
         <div className="weather">

src/features/weather/components/WeatherSkeleton.jsx

@@ -0,0 +1,49 @@
+import { memo } from 'react';
+
+function WeatherSkeleton({ weatherType }) {
+  return (
+    <div className="weather skeleton">
+      <div className="weatherCore">
+        <div className="iconAndTemps">
+          <div className="weathericon">
+            <div className="mainSkeletonIcon pulse"></div>
+            <span className="pulse">20C</span>
+          </div>
+          {weatherType >= 2 && (
+          <span className="minmax">
+            <span className="subtitle pulse">min</span>
+            <span className="subtitle pulse">max</span>
+          </span>
+          )}
+        </div>
+        {weatherType >= 2 && (
+        <div className="extra-info">
+          <span className="pulse">feels like x</span>
+          <span className="loc pulse">location</span>
+        </div>
+        )}
+      </div>
+      {weatherType >= 3 && (
+      <div className="weatherExpandedInfo">
+        <span className="subtitle pulse">extra information</span>
+        <div className="weatherExpandedInfoItems">
+          <div className="infoItemSkeleton">
+            <div className="smallSkeletonIcon pulse"></div>
+            <span className="loc pulse">location</span>
+          </div>
+          <div className="infoItemSkeleton">
+            <div className="smallSkeletonIcon pulse"></div>
+            <span className="loc pulse">location</span>
+          </div>
+          <div className="infoItemSkeleton">
+            <div className="smallSkeletonIcon pulse"></div>
+            <span className="loc pulse">location</span>
+          </div>
+        </div>
+      </div>
+      )}
+    </div>
+  );
+}
+
+export default memo(WeatherSkeleton);

src/features/weather/weather.scss

@@ -135,3 +135,63 @@
     }
   }
 }
+
+.weather.skeleton {
+  .iconAndTemps {
+    gap: 10px;
+  }
+
+  .weatherCore {
+    gap: 10px;
+  }
+
+  .weathericon {
+    gap: 10px;
+  }
+
+  .minmax {
+    max-width: fit-content;
+    background: transparent !important;
+    .subtitle {
+      margin-bottom: 5px;
+    }
+  }
+
+  .weatherExpandedInfoItems {
+    padding-top: 10px;
+  }
+
+  .mainSkeletonIcon {
+    width: 70px;
+    height: 70px;
+    border-radius: 100%;
+  }
+
+  .infoItemSkeleton {
+    display: flex;
+    flex-flow: row;
+    gap: 5px;
+    align-items: center;
+
+    .subtitle {
+      font-size: 18px;
+    }
+  }
+
+  .smallSkeletonIcon {
+    width: 20px;
+    height: 20px;
+    border-radius: 100%;
+  }
+
+  .title,
+  span {
+    color: transparent;
+    width: 100px;
+  }
+
+  .subtitle {
+    color: transparent;
+    width: 50px;
+  }
+}