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"));
    }
  }
}