Load the scanner in the background

[isaiahfisher]

I want to hide the scanner in a modal, but also still have the scanner load in the background. Ideally, the user would be unable to open the modal until the scanner has finished loading. Is there a way to kick off the loading process without rendering the component?

for reference here is my template:

<template>
    <div>
        <div>
            <button @click="toggleModal" class="text-primary">
                <i class="fas fa-barcode"></i>
            </button>
        </div>
        
        <b-modal 
            title="Scan a Barcode"
            v-model="showModal"
            scrollable
            centered
            size="huge"
            hide-footer
            @cancel="toggleModal"
        >
         <!-- todo: implement scanner here -->
         <StreamBarcodeReader @decode="handleScan"></StreamBarcodeReader>
        </b-modal>
    </div>
</template>