Added loading state

chunkangwong · Sep 10, 2023 · 36c0392 · 36c0392
1 parent 521ca1e
commit 36c0392
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -40,6 +40,7 @@ const setRenderer = async () => {
 function App() {
  const viewDiv = useRef<HTMLDivElement>(null);
  const layerView = useRef<__esri.FeatureLayerView>();
+ const [loading, setLoading] = useState(true);
  const [count, setCount] = useState(countDefault);
  const [orderBy, setOrderBy] = useState(orderByDefault);
  const [year, setYear] = useState(yearDefault);
@@ -60,6 +61,7 @@ function App() {
  if (!layer || !layerView.current) {
  return;
  }
+ setLoading(true);
  const query = new TopFeaturesQuery({
  topFilter: new TopFilter({
  topCount: count,
@@ -81,6 +83,7 @@ function App() {
  });
 
  setGraphics(results.features);
+ setLoading(false);
  };
  filterItems();
  }, [orderBy, count, year]);
@@ -116,7 +119,7 @@ function App() {
  handleYearChange={handleYearChange}
  handleReset={handleReset}
  />
- <Results year={year} graphics={graphics} />
+ <Results year={year} graphics={graphics} loading={loading} />
  </CalcitePanel>
  </CalciteShellPanel>
  <div id="viewDiv" ref={viewDiv} />

diff --git a/src/components/Results.tsx b/src/components/Results.tsx
@@ -9,9 +9,10 @@ import { view } from "../arcgis";
 interface ResultsProps {
  graphics: __esri.Graphic[];
  year: string;
+ loading: boolean;
 }
 
-const Results = ({ graphics, year }: ResultsProps) => {
+const Results = ({ graphics, year, loading }: ResultsProps) => {
  const handleResultClick = (graphic: __esri.Graphic, index: number) => () => {
  const popup = graphics && graphics[index];
  if (popup) {
@@ -35,6 +36,7 @@ const Results = ({ graphics, year }: ResultsProps) => {
  collapsible
  heading={`Results (${graphics.length})`}
  open={graphics.length > 0}
+ loading={loading}
  >
  <CalciteList>
  {graphics.map((graphic, index) => (