style changes and offer loading routing

client/src/routes/offers.tsx

@@ -16,6 +16,8 @@ function Home() {
         route('/search');
     }
 
+    if (!offers) return <div>loading...</div>;
+
     return (
         <div class={'offers'}>
             {offers.map(OfferGroup)}

client/src/routes/search.tsx

@@ -104,7 +104,7 @@ const User = () => {
                 <hr />
                 <p>Data provided by Discogs.</p>
             </div>
-            <div>
+            <div class='results'>
                 {infoEl}
                 {results.map(Result)}
                 {topEl}

client/src/store.tsx

@@ -11,7 +11,7 @@ export const userState = createSlice({
 
 export const offersState = createSlice({
   name: 'offers',
-  initialState: [],
+  initialState: null,
   reducers: {
     set: (state, action) => action.payload
   },

client/src/style/index.less

@@ -201,7 +201,7 @@ body {
 }
 
 main {
-    padding: 0 5% 0 5%;
+    padding: 0 var(--spacing-double) 0 var(--spacing-double);
 }
 
 button, [type=submit] {
@@ -283,14 +283,18 @@ article {
 .search {
     display: grid;
     grid-template-columns: 1fr 2fr;
-    grid-gap: calc(var(--spacing-double) * 2);
+
+    .results {
+        display: grid;
+        padding-left: var(--spacing);
+        grid-gap: var(--spacing);
 
         article {
             display: grid;
             padding: var(--spacing);
-        margin-bottom: var(--spacing);
             grid-template-columns: 1fr 4fr min-content;
         }
+    }
 
     button {
         margin-right: var(--spacing);
@@ -309,8 +313,7 @@ article {
     grid-template-columns:
         1fr 1fr 1fr;
 
-    grid-row-gap: var(--spacing);
+    grid-gap: var(--spacing);
-    grid-column-gap: var(--spacing);
 
     article {
         display: grid;
@@ -425,6 +428,7 @@ header {
 .offers {
     display: grid;
     grid-template-columns: 1fr 1fr;
+    grid-gap: var(--spacing);
 
     .offer {
         display: grid;
@@ -435,7 +439,6 @@ header {
             "lines lines";
 
         padding: var(--spacing);
-        margin: var(--spacing-half);
         background: var(--background-1);
 
         .details {
@@ -526,6 +529,10 @@ header {
             "contact"
             "words";
     }
+
+    main {
+        padding: 0 var(--spacing) 0 var(--spacing);
+    }
 }
 
 @media (max-width:1200px) {