Hi Val,
Based on your code, my guess would be that you see a decreased performance due to one of the breaking changes to map components from the release:
https://developers.arcgis.com/javascript/latest/release-notes/#map-components-breaking-changes
- Thearcgis-mapandarcgis-scenecomponents are no longer created with a default basemap. Use thebasemaporitem-idattribute to set the basemap on the component, or set theMapin JavaScript. Settingbasemap="none"is no longer valid; to create a map without a basemap simply avoid setting thebasemapattribute. Note that if you don't assign a basemap, thearcgisViewReadyChangeevent will not fire until the map's properties are updated.
Previously a default basemap would be loaded, and then the basemap you specified would be loaded afterwards. What that means for your code in 4.31 is that the call to fetch the feature layer and then add it to the map would actually execute before the final arcgisViewReadyChange event (it would have been triggered 2 or more times).
I've modified your codePen with the below by instead forcing the featureLayer to load outside of the arcgisViewReadyChange event listener, only using it to actually add the layer onto the map. This seems to have decreased the load time pretty dramatically, at least in this example.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>ArcGIS Map SDK for JavaScript 4.32 test</title>
<style>
html,
body {
background-color: var(--calcite-ui-foreground-2);
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
}
</style>
<!-- 4.31 featureLayer loads quickly -->
<!-- <link rel='stylesheet' type='text/css' href='https://js.arcgis.com/calcite-components/2.13.2/calcite.css' />
<script type='module' src='https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js'></script>
<link rel='stylesheet' href='https://js.arcgis.com/4.31/esri/themes/light/main.css' />
<script src='https://js.arcgis.com/4.31/'></script>
<script type='module' src='https://js.arcgis.com/map-components/4.31/arcgis-map-components.esm.js'></script> -->
<!-- 4.32 featureLayer takes a long time to load -->
<script type="module" src="https://js.arcgis.com/calcite-components/3.0.3/calcite.esm.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.32/"></script>
<script type="module" src="https://js.arcgis.com/map-components/4.32/arcgis-map-components.esm.js"></script>
</head>
<body>
<arcgis-map basemap="topo-vector" center='-118.805, 34.027' zoom='4'></arcgis-map>
<script>
const arcgisMap = document.querySelector("arcgis-map");
require([
'esri/layers/FeatureLayer'
],(
FeatureLayer
) => {
const featureLayer = new FeatureLayer({
url: 'https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/WorldCities/FeatureServer/0',
outFieilds: ['*']
});
featureLayer.load()
arcgisMap.addEventListener("arcgisViewReadyChange", (event) => {
arcgisMap.map.add(featureLayer);
});
});
</script>
</body>
</html>
