-
- Vendors
-
+
+
+ Vendors
+
+ {isValidating && }
+
+ } onClick={() => setLayout('GRID')} isDisabled={layout === 'GRID'} />
+ } onClick={() => setLayout('LIST')} isDisabled={layout === 'LIST'} />
+
+
-
- {isFetching &&
- new Array(PER_PAGE).fill(true).map((v, k) => (
-
-
-
-
-
-
- ))}
- {!isFetching &&
- vendors.map((v) => (
-
-
-
-
- {v.name}
-
-
-
- ))}
-
+ {error && (
+
+
+ There was an error processing your request
+
+ )}
-
+ {layout === 'GRID' && (
+
+ {isLoading &&
+ new Array(perPage).fill(true).map((v, k) => (
+
+
+
+
+
+
+
+
+ ))}
+ {!isLoading &&
+ vendors.map((v) => (
+
+
+
+
+
+ {v.name}
+
+
+ {v?.description?.substring(0, v?.description?.substring(0, 80).lastIndexOf(' '))} …
+
+
+
+
+ ))}
+
+ )}
+
+ {layout === 'LIST' && (
+ <>
+ {isLoading && (
+
+
+ {new Array(perPage).fill(true).map((v, k) => (
+
+ |
+
+ |
+
+
+ |
+
+
+ |
+
+ ))}
+
+
+ )}
+ {!isLoading && (
+
+
+ {vendors.map((v) => (
+
+
+ |
+
+ |
+ {v.name} |
+
+
+ {v?.description?.substring(0, v?.description?.substring(0, 80).lastIndexOf(' '))} …
+
+ |
+
+
+ ))}
+
+
+ )}
+
+ )}
+
+
+
+
+ Results per page:
+
+ {[12, 24, 48].map((n) => (
+
+ ))}
+
+