+ Start a Discussion
Kevin Cadger 1Kevin Cadger 1 

LWC Specialist Superbadge - Spinner Doesn't Stop

Hi everyone, looking for some assistance if possible please.

I have been doing the Lightning Web Components Superbadge and have managed to get through to Challenge 10. However, my page is not functioning quite as it should be.. The initial page loads and everything seems fine, but once I change the Boat Type selection it just keeps spinning. 

I have found some resources online and checked the answers I could find from other Trailblazers, but this has now got me quite stumped and I'd appreciate any help I could get. 

I think the problem is coming from the searchBoatResults component. I have pasted the code I have below.
 

<template>
  <lightning-tabset variant="scoped">
    <lightning-tab label="Gallery">
      <template if:true={boats.data}>
        <div class="slds-scrollable_y">
          <lightning-layout horizontal-align="center" multiple-rows>
            <template for:each={boats.data} for:item="boat">
              <lightning-layout-item
                key={boat.Id}
                padding="around-small"
                size="12"
                small-device-size="6"
                medium-device-size="4"
                large-device-size="3"
              >
                <c-boat-tile
                  boat={boat}
                  selected-boat-id={selectedBoatId}
                  onboatselect={updateSelectedTile}
                ></c-boat-tile>
              </lightning-layout-item>
            </template>
          </lightning-layout>
        </div>
      </template>
    </lightning-tab>
    <lightning-tab label="Boat Editor">
      <template if:true={boats.data}>
        <div class="slds-scrollable_y">
          <lightning-datatable
            key-field="Id"
            data={boats.data}
            columns={columns}
            onsave={handleSave}
            draft-values={draftValues}
            hide-checkbox-column
            show-row-number-column
          ></lightning-datatable>
        </div>
      </template>
    </lightning-tab>
    <lightning-tab label="Boats Near Me">
      <!-- boatsNearMe component goes here -->
      <c-boats-near-me boat-type-id={boatTypeId}></c-boats-near-me>
    </lightning-tab>
  </lightning-tabset>
</template>
import { LightningElement, api, wire } from "lwc";
import { updateRecord } from "lightning/uiRecordApi";
import { ShowToastEvent } from "lightning/platformShowToastEvent";
import { refreshApex } from "@salesforce/apex";
import { publish, MessageContext } from "lightning/messageService";
import getBoats from "@salesforce/apex/BoatDataService.getBoats";
import BOATMC from "@salesforce/messageChannel/BoatMessageChannel__c";

export default class BoatSearchResults extends LightningElement {
  isLoading = false;
  boatTypeId = "";
  boats;
  selectedBoatId;

  // Declare the columns to be used for the datatable.
  columns = [
    { label: "Name", fieldName: "Name", editable: "true" },
    {
      label: "Length",
      fieldName: "Length__c",
      type: "number",
      editable: "true"
    },
    {
      label: "Price",
      fieldName: "Price__c",
      type: "currency",
      editable: "true"
    },
    { label: "Description", fieldName: "Description__c", editable: "true" }
  ];

  // wired message context
  @wire(MessageContext)
  messageContext;

  // Get the boats using apex.
  @wire(getBoats, { boatTypeId: "$boatTypeId" })
  wiredBoats(result) {
    this.notifyLoading(false);
    this.boats = result;
    if (result.error) {
      console.log(result.error.message);
    }
    this.notifyLoading(false);
  }

  // public function that updates the existing boatTypeId property
  // uses notifyLoading
  @api
  searchBoats(boatTypeId) {
    this.notifyLoading(true);
    this.boatTypeId = boatTypeId;
  }

  // this public function must refresh the boats asynchronously
  // uses notifyLoading
  @api
  async refresh() {
    this.notifyLoading(true);

    await refreshApex(this.boats);

    this.notifyLoading(false);
  }

  // this function must update selectedBoatId and call sendMessageService
  updateSelectedTile(event) {
    this.selectedBoatId = event.detail.boatId;
    this.sendMessageService(this.selectedBoatId);
  }

  // Publishes the selected boat Id on the BoatMC.
  sendMessageService(boatId) {
    publish(this.messageContext, BOATMC, { recordId: boatId });
  }

  handleSave(event) {
    this.notifyLoading(true);

    const recordInputs = event.detail.draftValues.slice().map((draft) => {
      const fields = Object.assign({}, draft);
      return { fields };
    });

    // For each record.
    const promises = recordInputs.map((recordInput) => {
      updateRecord(recordInput); // Updates the record.
    });
    Promise.all(promises)
      .then(() => {
        this.dispatchEvent(
          new ShowToastEvent({
            title: "Success",
            message: "Ship It!",
            variant: "success"
          })
        );
        return this.refresh();
      })
      .catch((error) => {
        this.dispatchEvent(
          new ShowToastEvent({
            title: "Error",
            message: error.message,
            variant: "error"
          })
        );
        this.notifyLoading(false);
      })
      .finally(() => {
        this.draftValues = [];
      });
  }

  // Check the current value of isLoading before dispatching the doneloading or loading custom event
  notifyLoading(isLoading) {
    this.isLoading = isLoading;
    if (this.isLoading) {
      this.dispatchEvent(new CustomEvent("loading"));
    } else {
      this.dispatchEvent(new CustomEvent("doneloading"));
    }
  }
}

 
Best Answer chosen by Kevin Cadger 1
AbhishekAbhishek (Salesforce Developers) 
For all the Trailhead issues please report it here,

https://trailhead.salesforce.com/help?support=home#

https://trailhead.salesforce.com/help

So that our trailhead support engineers will look into it and get back to you.

I hope you find the above information is helpful. If it does, please mark as Best Answer to help others too.

Regards,
Salesforce Support.

All Answers

AbhishekAbhishek (Salesforce Developers) 
For all the Trailhead issues please report it here,

https://trailhead.salesforce.com/help?support=home#

https://trailhead.salesforce.com/help

So that our trailhead support engineers will look into it and get back to you.

I hope you find the above information is helpful. If it does, please mark as Best Answer to help others too.

Regards,
Salesforce Support.
This was selected as the best answer
Francis CrumpFrancis Crump
My error is:

Challenge Not yet complete... here's what's wrong:
We can’t find the component boatSearchForm. Make sure the component was created according to the requirements.

even though I have created and saved (and it works) the component and it is named properly.